Flutter Scaffold - 온더테크

`Scaffold`는 Flutter에서 화면의 기본적인 구조를 만드는 데 사용되는 위젯입니다. 앱바, 드로어, 플로팅 액션 버튼, 바텀 네비게이션 바 등을 포함하는 다양한 UI 요소를 쉽게 구성할 수 있도록 도와줍니다. `Scaffold`는 Material Design의 주요 레이아웃 구조를 제공합니다.

▶ 주요 속성

– appBar: 화면 상단에 표시되는 앱바를 설정합니다. `AppBar` 위젯을 사용합니다.
– body: 주요 콘텐츠가 위치하는 영역을 설정합니다.
– floatingActionButton: 화면 오른쪽 하단에 떠 있는 액션 버튼을 설정합니다. `FloatingActionButton` 위젯을 사용합니다.
– drawer: 왼쪽에서 슬라이드하여 열 수 있는 네비게이션 드로어를 설정합니다. `Drawer` 위젯을 사용합니다.
– bottomNavigationBar: 화면 하단에 표시되는 네비게이션 바를 설정합니다.
– backgroundColor: `Scaffold`의 배경 색상을 설정합니다.
– bottomSheet: 화면 하단에 표시되는 일종의 팝업을 설정합니다.
– persistentFooterButtons: 항상 화면 하단에 표시되는 버튼들을 설정합니다.

▶ 예제 코드

다양한 `Scaffold` 속성을 사용하여 앱을 구성하는 예제를 보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Scaffold Example'),
      ),
      body: Center(
        child: Text('Hello, Scaffold!', style: TextStyle(fontSize: 24)),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // 액션 버튼 클릭 시 수행할 작업
          print('Floating Action Button Clicked');
        },
        child: Icon(Icons.add),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text('Drawer Header'),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text('Item 1'),
              onTap: () {
                // 아이템 클릭 시 수행할 작업
                Navigator.pop(context);
              },
            ),
            ListTile(
              title: Text('Item 2'),
              onTap: () {
                // 아이템 클릭 시 수행할 작업
                Navigator.pop(context);
              },
            ),
          ],
        ),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

▶ 코드 설명

– AppBar 사용:
  – `Scaffold`의 `appBar` 속성에 `AppBar` 위젯을 지정하여 화면 상단에 앱바를 추가합니다.
  – `title` 속성에 텍스트를 지정하여 앱바의 제목을 설정합니다.

– Body 사용:
  – `Scaffold`의 `body` 속성에 `Center` 위젯을 지정하여 중앙에 텍스트를 표시합니다.
  – `Text` 위젯을 사용하여 ‘Hello, Scaffold!’라는 텍스트를 표시합니다.

– FloatingActionButton 사용:
  – `Scaffold`의 `floatingActionButton` 속성에 `FloatingActionButton` 위젯을 지정하여 화면 오른쪽 하단에 떠 있는 액션 버튼을 추가합니다.
  – `onPressed` 콜백을 지정하여 버튼 클릭 시 콘솔에 메시지를 출력합니다.

– Drawer 사용:
  – `Scaffold`의 `drawer` 속성에 `Drawer` 위젯을 지정하여 왼쪽에서 슬라이드하여 열 수 있는 네비게이션 드로어를 추가합니다.
  – `DrawerHeader`와 `ListTile` 위젯을 사용하여 드로어의 헤더와 항목을 구성합니다.
  – `onTap` 콜백을 지정하여 항목 클릭 시 드로어를 닫습니다.

– BottomNavigationBar 사용:
  – `Scaffold`의 `bottomNavigationBar` 속성에 `BottomNavigationBar` 위젯을 지정하여 화면 하단에 네비게이션 바를 추가합니다.
  – `BottomNavigationBarItem`을 사용하여 네비게이션 바의 항목을 구성합니다.

이 예제는 `Scaffold` 위젯의 다양한 속성을 사용하여 앱의 기본 구조를 만드는 방법을 보여줍니다. `Scaffold`는 복잡한 레이아웃을 쉽게 구성할 수 있도록 도와주는 중요한 위젯입니다.

Post Views: 152

Leave a Reply Cancel reply