3일

30강. MaterialApp Widget과 Scaffold Widget

MaterialDesign

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

플러터에서 머티리얼 디자인을 쉽게 개발할 수 있도록 "디자인 시스템"을 기반하는 위젯을 만들어줌

MaterialApp위젯

MaterialApp을 최상단 위젯으로 감싸면, 위젯에서 기본적인 Material에 필요한 디자인 요소가 어플 전체에 적용건물(앱)을 짓기 위해서 땅(MaterialApp)과 철근(Scaffold)이 필요하듯이 꼭 필수로 작성해야하는 위젯

31강. AppBar Widget

AppBar위젯

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

appBar:AppBar(
	title: Text('플러터 짱'),
    
    //색상넣기
    backgroundColor : Colors.red
    
    //가운데 정렬(default값) 풀기
    benterTitle : false,
    
    //배경색 없애기
    backgroundColor:Color.tranparent,
    
    //기본 그림자 없애기
    elevation:0
    
    //foreground색상 넣기
    foregroundColor:Colors.black,
    
    //제일 앞에 아이콘 넣기
    leading : Icon(Icon.people),
    
    //제일 뒤에 아이콘 넣기
    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),
        ),
    ]
)

32강. BottomNavigationBar Widget

앱들의 스크린 네비게이션이 되며, 주로 다음 과 같이 사용

위젯이지만 Scaffold에 bottomNavigationBar속성에만 넣어서 사용 가능

BottomNavigatonBar의 필수 속성값은 items이며, List<BottomNavigationItem> 데이터 타입을 줘야함

bottomNavigationBar:BottomNavigatonBar(
	//조건 items에 제공되는 List length는 2개 이상이어야함
	items: [
    	BottomNavigationBarItem(icon:Icon(Icon.home). lable:"홈",
        BottomNavigationBarItem(icon:Icon(Icon.search). lable:"검색",
    ]
)

33강. FloatingActionButton Widget

위젯이지만 Scaffold에 floatingActionButton 속성에만 넣어서 사용가능

FloatingActionButton 필수 속성값은 onPressed이며, 함수를 줘야함

floatingActionButton : FloatingActionButton(
	onPressed:(){}
)

//아이콘 넣기
floatingActionButton : FloatingActionButton(
	onPressed:(){},
    child:Icon(Icons.add)
)

//버튼 작게 넣기
floatingActionButton : FloatingActionButton(
	onPressed:(){},
    child:Icon(Icons.add),
    mini:true
)

34강. Custom Widget 만들기

생략

35강. 스타벅스 앱 만들기

생략

 

 

 

본 후기는 유데미-스나이퍼팩토리 9주 완성 프로젝트캠프 학습 일지 후기로 작성 되었습니다.