Flutter MeterialApp Scaffold Widget

i_thank·2022년 7월 24일
0

Flutter

목록 보기
3/7

MaterialApp()

MaterialApp(
	title: 'Material Title',
    theme: ThemeData(primarySwatch: Colors.red),
    home: MyScaffold()
)

MaterialApp에는 앱 제목을 설정하는 title, 앱 테마를 설정하는 theme, home위젯을 설정하는 home 속성이 있습니다.
모든 위젯은 MaterialApp Widget이 감싸야합니다. 그리고 Scaffold() 위젯을 처음으로 설정합니다. 그래서 home이라는 속성이 있다고 볼 수있습니다.

MaterialApp.theme

theme속성에는 ThemeData() 를 설정할 수 있습니다. 여기서는 앱의 주요 색상을 설정하는 primarySwatch를 정해주었습니다.

Scaffold()

Scaffold(
	appBar: AppBar(
    	title: Text('Scaffold appBar title'),
        centerTitle: true,
        elevation: 0.0,
        leading: IconButton(
        	icon: Icon(Icons.menu),
            onPressed: (){}
        ),
        actions: <Widget>[
        	IconButton(
            	icon: Icon(Icons.shopping_cart),
                onPressed: (){}
            ),
            IconButton(
            	icon: Icon(Icons.search),
                onPressed: (){}
            )
        ]
        
    ),
    body: Text('Scaffold')
)


다양한 기능이 있는 Scaffold() 위젯입니다. 먼저 appBar 속성에 대해 정리합니다.

appBar

AppBar()위젯을 속성으로 가질 수 있고, 여기 AppBar() 위젯의 속성에 여러 기능을 설정할 수 있습니다.
1. title : 앱바의 타이틀을 설정합니다.
2. centerTitle : 앱바 타이틀의 센터 정렬여부를 결정합니다.
3. elevation : 앱바 타이틀의 튀어나옴정도를 설정합니다. 0.0으로 주었기 때문에 딱 붙어 있습니다.
4. leading : 앱바의 왼쪽 상단에 붙어있는 버튼을 설정합니다.
5. actions : 앱바의 오른쪽 상단에 붙어있는 버튼들을 설정합니다. 복수개로 선택할 수 있습니다.

0개의 댓글