5일차 과제 링크 👉 5일차 과제

MaterialDesign (머티리얼 디자인)

• 구글에서 제작하고 제안한 웹/앱 디자인 가이드 시스템

MaterialApp 위젯

• MaterialApp을 최상단 위젯으로 감싸면 기본적인 Material에 필요한 디자인 요소가 어플 전체에 적용됨.
• MaterialApp : 앱으로서 기능을 할 수 있도록 해주는 뼈대
• Scaffold : 구성된 앱에서 디자인적인 부분에서의 뼈대
• ListTile의 디자인, Icon의 Icon들도 모두 Material Design!
  • https://m2.material.io/components/lists
  • https://fonts.google.com/icons

AppBar 위젯

• 앱의 헤더가 되며, 주로 다음과 같이 사용된다
• 위젯이지만 Scaffold에 appBar 속성에만 넣어서 사용 가능
• safeArea를 통해 얻은 “안전영역”을 기본적으로 제공

  Scaffold(
    appBar: AppBar(),
    body: Text('Flutter is the best!'),
  )

  

AppBar 위젯의 여러가지 속성

AppBar(
  title: Text('플러터 굉장하다'),   // 이름 적기
  backgroundColor: Colors.red,     // 색상 넣기
  foregroundColor: Colors.black,   // foreground 색상 넣기
  centerTitle: false,              // 가운데 정렬 풀기
  // backgroundColor: Colors.transparent  // 배경색 없애기
  elevation: 0,                     // 그림자 없애기
  leading: Icon(Icons.access_time), // 제일 앞에 아이콘 넣기
  actions: [                        // 제일 뒤에 아이콘 넣기
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Icon(Icons.share),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Icon(Icons.shopping_cart),
    ),
    Padding(
      padding: const EdgeInsets.all(8.0),
      child: Icon(Icons.search),
    ),
  ],
),

BottomNavigationBar 위젯

• 앱들의 스크린 네비게이션
  
• 위젯이지만 Scaffold에 bottomNavigationBar 속성에만 넣어서 사용 가능
• 필수 속성값 : **items** , List<BottomNavigationItem> 데이터 타입을 줘야함

bottomNavigationBar: BottomNavigationBar(
  items: [],
),

• items에 제공되는 List의 length(개수)는 2개가 넘어야 한다.

bottomNavigationBar: BottomNavigationBar(
  items: [
    BottomNavigationBarItem(icon: Icon(Icons.home), label: '홈'),
    BottomNavigationBarItem(icon: Icon(Icons.search), label: '검색'),
    BottomNavigationBarItem(icon: Icon(Icons.shopping_cart), label: '쇼핑카트'),
  ],
),

FAB (Floating Action Button) 위젯

• 위젯이지만 Scaffold에 floatingActionButton 속성에만 넣어서 사용 가능
  • 일반 위젯처럼 사용이 가능하긴 하지만 보통적으로는 Scaffold 안에다가
• 필수 속성값 : **onPressed**, function을 줘야 한다.

floatingActionButton: FloatingActionButton(
  onPressed: () {},
),

FAB 위젯의 여러가지 속성

floatingActionButton: FloatingActionButton(
  onPressed: () {},
  backgroundColor: Colors.black,  // 버튼 색
  elevation: 0,           // 그림자
  child: Icon(Icons.add), // 아이콘 넣기
  mini: true,             // 아이콘 작게
),

---

5일차 끝

오늘부터 공부 겸 1일 1커밋(깃허브 잔디밭 채우기) 도전해보겟습니다

깃허브 링크 -> github

열심히 살아보기~~~...