scaffold 및 widget 사용법

import 'package:flutter/material.dart';
 
void main() {
  runApp(MyApp());
}
 
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}
 
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}
 
class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Material Design App'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
        body: Container(
            child: Center(
                child: Column(
                      children: <Widget>[
                                    Icon(Icons.android), 
                                    Text('android')
                              ],
                      mainAxisAlignment: MainAxisAlignment.center,
                )
            )    
        )
    );
  }
}

 

- scaffold 클래스는 각종 위젯을 머티리얼 디자인 레이아웃으로 설계하는 것을 돕는 역할

- appBar: 최상단 bar를 생성하고 타이틀을 text로 삽입

- 플로팅버튼: floatingActionButton 으로 떠 있는 버튼 생성. 아이콘은 Icons 클래스 이용

   아이콘 그림 참조. ( material.io/resources/icons/?style=baseline )

- body: 앱의 메인화면 구성

- containter: 본문 내의 위젯을 담는 상자

- 위젯을 여러개 만들경우 Row, Column을 사용 

   Row: 가로로 위젯 배치

   Column: 세로로 위젯 배치

- Row, Column안에는 childern 을 이용해서 배열 형태로 선언

- 안드로이드 아이콘의 가운데 정렬

   : Container 클래스에 Center클래스로 가로 정렬을 해주고, Column 클래스에

     MainAxisAlignment.center로 세로 정렬