머티리얼(material) 디자인 위젯

머티리얼 디자인은 구글이 개발한 디자인 가이드라인으로,
모바일 및 웹 애플리케이션에서 사용되는 UI/UX 요소를 표준화하고 일관성을 유지할 수 있도록 돕습니다.
Flutter에서는 머티리얼 디자인 가이드라인을 준수하는 위젯을 제공합니다.
이번에는 머티리얼 디자인 위젯 중 몇 가지를 소개하겠습니다.

• AppBar: 앱의 상단에 표시되는 바입니다. 주로 제목이나 로고, 메뉴 등의 내용을 담습니다.

• BottomNavigationBar: 화면 하단에 표시되는 탭바입니다. 각 탭을 누르면 해당 내용이 화면에 표시됩니다.

• Card: 정보를 담은 카드를 표시하는 위젯입니다. 카드 내부에는 이미지, 텍스트, 버튼 등의 요소를 포함할 수 있습니다.

• FloatingActionButton: 주요 작업을 수행할 수 있는 버튼입니다. 화면 하단에 위치하며, 일반적으로 액션 버튼이나 추가 버튼 등으로 사용됩니다.

• TextField: 사용자 입력을 받을 수 있는 텍스트 필드입니다. 사용자가 텍스트를 입력하면 그에 따라 동적으로 화면이 업데이트됩니다.

• AlertDialog: 알림창을 표시하는 위젯입니다. 사용자에게 메시지를 전달하거나 확인을 요청할 때 사용됩니다.

위젯들은 머티리얼 디자인 가이드라인을 준수하며, 일관된 디자인으로 애플리케이션을 개발할 수 있도록 돕습니다. 이 외에도 다양한 머티리얼 디자인 위젯이 있으며, 이 위젯들을 조합하여 다양한 화면을 구성할 수 있습니다.

AppBar 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('AppBar Example'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

FloatingActionButton

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'FloatingActionButton Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('FloatingActionButton Example'),
        ),
        body: Center(
          child: Text('Press the button!'),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          tooltip: 'Increment Counter',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

BottomNavigationBar 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int _selectedIndex = 0;

  static const List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Profile Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'BottomNavigationBar Example',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('BottomNavigationBar Example'),
        ),
        body: Center(
          child: _widgetOptions.elementAt(_selectedIndex),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: const <BottomNavigationBarItem>[
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
              label: 'Home',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
              label: 'Search',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.person),
              label: 'Profile',
            ),
          ],
          currentIndex: _selectedIndex,
          onTap: _onItemTapped,
        ),
      ),
    );
  }
}

Card 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card Example',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Card Example'),
        ),
        body: Center(
          child: Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  leading: Icon(Icons.album),
                  title: Text('Song Name'),
                  subtitle: Text('Artist Name'),
                ),
                ButtonBar(
                  children: <Widget>[
                    FlatButton(
                      child: const Text('PLAY'),
                      onPressed: () {/* ... */},
                    ),
                    FlatButton(
                      child: const Text('PAUSE'),
                      onPressed: () {/* ... */},
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

TextField

TextField(
  decoration: InputDecoration(
    labelText: '이름',
    hintText: '홍길동',
    prefixIcon: Icon(Icons.person),
    border: OutlineInputBorder(),
  ),
  onChanged: (text) {
    // 입력된 텍스트가 변경될 때마다 호출됩니다.
    print('입력된 텍스트: $text');
  },
)

위 예시에서 decoration 속성을 사용하여 TextField의 외관을 수정했습니다.
labelText 속성은 TextField 위에 나타나는 라벨을 지정합니다.
prefixIcon 속성은 TextField 왼쪽에 아이콘을 추가합니다.
border 속성은 TextField의 외곽선을 지정합니다.
사용자가 텍스트를 입력할 때마다 onChanged 함수가 호출되어 입력된 텍스트를 출력합니다.
TextField 위젯은 decoration 속성을 사용하여 라벨과 힌트 텍스트를 설정할 수 있습니다.
onChanged 속성은 사용자가 텍스트를 입력할 때마다 호출되는 콜백 함수를 설정할 수 있습니다.

AlertDialog

ElevatedButton(
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Alert Dialog Title"),
          content: Text("This is the content of the alert dialog."),
          actions: <Widget>[
            TextButton(
              child: Text("Cancel"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: Text("Ok"),
              onPressed: () {
                // Perform some action
                Navigator.of(context).pop();
              },
            ),
          ],
        );
      },
    );
  },
  child: Text('Show Alert Dialog'),
)

이 코드는 "Show Alert Dialog" 버튼을 누르면 AlertDialog가 표시됩니다.
AlertDialog에는 제목과 내용이 있으며, "Cancel" 및 "Ok" 버튼으로 닫을 수 있습니다.
"Cancel" 버튼을 누르면 AlertDialog가 닫히고 "Ok" 버튼을 누르면 어떤 작업이 수행됩니다.
위의 코드에서는 단순히 AlertDialog를 닫습니다.