플러터 Material Design으로 기본 화면 구성

Material Design 쓰려면

pubspec.yaml 파일에 해당 문구를 넣고 저장해야 한다

flutter:
  uses-material-design: true 

메터리얼 디자인에선 

모바일의 기본 형태인 제목 타이틀 부분 본문 부분, 하단 버튼 부분을 쉽게 나눠주는 함수 클래스? 인 Scaffold를 지원한다. 

 

최상단에 메터리얼 다트 파일을 임포트 한다. 그안의 함수와 클래스를 가져다 쓰기 위함 

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home:TestHome(),
    );
  }
}

 

그리고 홈 부분에 메인 페이지로 쓸 클래스를 가져온다 여기서는 TestHome

 

TestHome  클래스를 하단의 빈 곳에 정의한다. 

 

class TestHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('앱 제목'),
      ),
      body: Center(
        child: Column(
            children: [ Icon(Icons.star), Icon(Icons.star), Icon(Icons.star) ]
        ),
      ),
      bottomNavigationBar: BottomAppBar(
          child: Container(
              height: 60,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  Icon(Icons.phone),
                  Icon(Icons.message),
                  Icon(Icons.contact_page),
                ],
              )
          )
      ),
    );
  }
}

 

해당 코드를 가상 안드로이드에서 실행시킨 화면