카테고리 없음

Flutter - Scaffold

팡세영 2024. 4. 24. 17:36

Scaffold 위젯은 앱의 기본적인 시각적 레이아웃 구조를 제공하는데 중요한 요소 중 하나이다.

Scaffold는 Material Design 가이드라인을 따르며 대표적인 구성 요소는 아래와 같다.

  • AppBar (상단 앱 바)
  • BottomNavigationBar (하단 탭 바)
  • Drawer (메뉴)
  • body (본문

간단한 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Scaffold Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // 버튼이 눌렸을 때 실행할 코드
            print('FloatingActionButton Pressed');
          },
          child: Icon(Icons.add),
        ),
        drawer: Drawer(
          child: ListView(
            // Drawer 내부의 항목들
            children: <Widget>[
              DrawerHeader(
                child: Text('Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
              ),
              ListTile(
                title: Text('Item 1'),
                onTap: () {
                  // 항목을 탭했을 때 실행할 코드
                  Navigator.pop(context);
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}