플러터 Material 구성요소 예제 코드와 설명

플러터는 Material Design을 따르는 앱 구축에 도움이 되는 다양한 위젯을 제공한다. MaterialApp을 포함해서 앱 루트에 여러 가지 유용한 위젯을 구축하는 위젯으로 시작한다. 아래는 Material Design을 사용하는 기본적인 예제 코드이다.

👉 참고. Flutter UI # Using Material Components

이 코드는 Flutter 프레임워크를 사용하여 간단한 앱을 만들어 보여준다. 앱은 상단 앱바(AppBar), 중앙 텍스트, 그리고 우측 하단에 떠있는 액션 버튼(FloatingActionButton)으로 구성된다.

import 'package:flutter/material.dart';

void main() {
  runApp(
    const MaterialApp(
      title: 'Flutter Tutorial',
      home: TutorialHome(),
    ),
  );
}

이 부분은 앱의 시작점입니다. `MaterialApp` 위젯을 생성하고, 그 안에 `TutorialHome`이라는 위젯을 홈으로 지정합니다.

class TutorialHome extends StatelessWidget {
  const TutorialHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(

`TutorialHome` 클래스는 `StatelessWidget`을 상속받는다. `Scaffold` 위젯은 기본적인 레이아웃을 제공하며, `AppBar`, `body`, `floatingActionButton` 등을 포함할 수 있다.

      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: const Text('Example title'),
        actions: const [
          IconButton(
            icon: Icon(Icons.search),
            tooltip: 'Search',
            onPressed: null,
          ),
        ],
      ),

이 부분에서는 `AppBar`를 설정한다. `leading`은 앱바 왼쪽에 위치한 버튼을, `actions`는 오른쪽에 위치한 버튼을 나타낸다. 여기서는 `onPressed: null`로 설정했기 때문에 버튼은 비활성화 상태이다.

      body: const Center(
        child: Text('Hello, world!'),
      ),

`body`에는 중앙에 'Hello, world!' 텍스트가 위치한다. `Center` 위젯을 사용하여 텍스트를 화면 중앙에 배치한다.

      floatingActionButton: const FloatingActionButton(
        tooltip: 'Add', 
        onPressed: null,
        child: Icon(Icons.add),
      ),
    );
  }
}

마지막으로, `floatingActionButton`은 화면의 우측 하단에 위치한 원형 버튼이다. 아이콘은 `+`이며, 툴팁으로 'Add'를 설정했다. `onPressed: null`로 설정했기 때문에 버튼은 비활성화 상태이다.

이 코드는 Flutter의 기본 위젯을 사용하여 간단한 UI를 구성하는 좋은 예시이다. AppBar, Center, Text, IconButton, FloatingActionButton 등은 모두 Flutter에서 자주 사용되는 기본 위젯임을 참고하자.

플러터 Material 구성요소 예제 코드와 설명

You might like