플러터 기본 위젯 넣는 법

구글이 제공하는 기본 플러터 테마

• Material Design 과 Cupertino(아이폰 스타일)
• 둘중 하나 쓰려면 각각의 테마위젯 불러와서 써야하고 커스텀하겠다 하면 일단 Material을 불러와서 커스텀을 해야함.
• Material Design 쓰려면 일단 pubspec.yaml 파일에 uses-material-design true로 켜져 있어야함. 기본 설정 되있는듯

상중하 기본 레이아웃

MaterialApp( 
	home: Scaffold( 
		appBar: 상단에 넣을 위젯, 
		body: 중단에 넣을 위젯, 
		bottomNavigationBar: 하단에 넣을 위젯, 
	) 
);

• Scaffold 위젯은 appBar, body, bottomNavigationBar 3개 파라미터 넣을 시 상/중/하로 알아서 쪼개짐
• 상,하단바는 필수가 아닌데 Body는 필수

가로/세로로 균일하게 쪼개주는 Row/Column 위젯

• children 이라는 배열 파라미터를 써주면 해당 리스트가 나옴
• mainAxisAlignment, crossAxisAlignment로 정렬도 가능. 정렬 파라미터는 자동완성으로 나온댜

강의 과제 코드

//위쪽은 기본세팅 같은것  
//코드는 이 아래서부터 작업  
//Flutter 앱 디자인은 위젯 짜집기  
return MaterialApp(  
    appBar: AppBar(  
      title: Text('앱임')  
    ),  
	 body: Container(  
      child: Text('안녕')  
    ),  
	 /* bottomAppBar 써야했는데 NavigationBar로 해서 결과물이 달랐던듯  
	 bottomNavigationBar: BottomNavigationBar( items: [ BottomNavigationBarItem(icon: Icon(Icons.phone), label: ''), BottomNavigationBarItem(icon: Icon(Icons.message), label: ''), BottomNavigationBarItem(icon: Icon(Icons.contact_page), label: '') ], ),  
 */ bottomNavigationBar: BottomAppBar(  
      child: SizedBox(  
        height: 50,  
		 child: Row(  
		    mainAxisAlignment: MainAxisAlignment.spaceEvenly,  
			children: [  
				 Icon(Icons.phone),  
				 Icon(Icons.message),  
				 Icon(Icons.contact_page)  
	          ],  
			 ),  
		 ),  
	),  
 )  
);