[Flutter] 6월 14일 주요 위젯 학습

To do : 

• MaterialApp과 Scaffold
• 텍스트 위젯(Text)
• 버튼 위젯(ElevatedButton, TextButton, IconButton)
• 이미지 위젯(Image)

---

1. MaterialApp과 Scaffold

MaterialApp

MaterialApp 클래스는 Flutter에서 Material Design 스타일을 사용하기 위한 애플리케이션의 기본 클래스이다. 기본 텍스트 스타일, 테마, 경로, 네비게이터 등을 설정하여 앱의 전반적인 구조를 관리한다.

 

주요 기능

1. Material Design 스타일 적용:
   • MaterialApp은 WidgetsApp을 기반으로 하여 Material Design을 위한 기능을 추가한다.
   • AnimatedTheme와 GridPaper와 같은 Material Design 특정 기능이 포함된다.
2. 기본 텍스트 스타일 경고:
   1. 기본적으로 빨강/노랑 텍스트 스타일로 설정되어 있어, 개발자가 텍스트 스타일을 정의하지 않았음을 경고한다.
   2. 일반적으로 앱의 Scaffold 위젯이 전체 텍스트 스타일을 정의한다.
3. 라우트 설정: 최상위 Navigator를 설정하여 경로를 찾는 순서를 지정한다.
   1. `/ ` 경로의 경우, `home` 속성이 사용된다.(비어 있지 않을 경우)
   2. 그렇지 않으면, `routes` 테이블이 사용된다.
   3. 그래도 경로가 없으면, `onGenerateRoutes`가 호출된다.
   4. 마지막으로 모든 것이 실패하면 `onUnknownRoutes`가 호출된다.

주요 속성

• title: 앱 제목 설정
• theme: 앱 테마 설정
• home: 기본 경로 위젯
• routes: 명명된 라우트 테이블
• naviagtorKey: 전역 네비게이터 키 설정
• onGenerateRoute: 동적 라우트 생성 콜백
• LocalizationsDelegates: 로컬화 지원

예제:

MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(PrimarySwatch: Colors.blue),
    home: MyHomePage(),
    routes: {
    	'/second': (context) => SecondPage(),
    },
)

 

Scaffold

Scaffold 클래스는 Flutter 애플리케이션에서 화면의 기본 구조와 레이아웃을 제공하는 위젯이다. `Scaffold`는 일반적으로 앱의 상단인 AppBar, 하단인 Bottom Navigation Bar, 사이드 메뉴 Drawer 등을 포함하여 Material Design 스타일의 기본적인 레이아웃 요소를 쉽게 구성할 수 있게 도와준다.

 

주요 속성:

1. appBar:
   • 화면 상단의 앱바를 설정한다.
   • 일반적으로 `AppBar` 위젯을 사용한다
2. body:
   • 주 콘텐츠를 표시하는 영역이다.
   • 다양한 위젯을 배치할 수 있다.
3. floatingActionButton:
   • 화면의 한쪽 구석에 떠 있는 액션 버튼을 설정한다.
   • 일반적으로 중요한 단일 액션을 수행하는 버튼으로 사용된다
4. bottonNavigatorBar:
   • 화면 하단의 네비게이션 바를 설정한다.
   • 주로 앱의 여러 주요 섹션 간 이동을 위해 사용된다.
5. drawer:
   • 화면 왼쪽에서 슬라이드하여 열 수 있는 메뉴를 설정한다
   • 일반적으로 앱의 주요 기능 및 섹션을 나열한다.
6. backgroundColor:
   
   • 화면 배경색을 설정한다
7. bottomSheet:
   • 화면 하단에 임시로 표시할 시트를 설정한다
   • 사용자가 상호작용할 수 있는 추가 콘텐츠를 제공한다.

예제:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title: 'scaffold demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: (){
          // 액션 버튼 눌렀을 때의 동작
        },
        child: Icon(Icons.add),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
      ),
      drawer: Drawer(
        child:
        ListView(
          padding: EdgeInsets.zero,
          children: const <Widget>[
            DrawerHeader(
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
              child: Text(
                'Drawer Header',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 24,
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Messages'),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('profile'),
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
            ),
          ],
        ),
      ),
    );
  }
}

 

실행 화면:

 

 

화면 설명:

• AppBar: 화면 상단에 "Home Page"제목
• Body: 중앙에 "Hello, World!" 텍스트
• FloatingActionButton: 첫 번째 화면 오른쪽 하단에 "+"아이콘 액션 버튼
• BottomNavigatorBar: 화면 하단에 네비게이션 바 "Home", "Business", "School"
• Drawer: 화면 왼쪽에서 슬라이드하여 열 수 있는 메뉴 "Message", "Profile", "Settings"