플러터 기본기 다지기 - MaterialApp의 주요 property와 사용법

MaterialApp의 주요 property와 사용법

• theme: 앱의 전체 테마, 색상 구성 등이 포함 (예, theme: ThemeData(primarySwatch: Colors.red))
• home: 앱이 시작할 때 보여질 기본 경로 또는 위젯

home: Scaffold(
  appBar: AppBar(title: const Text('FunCoding')),
),

debugShowCheckedModeBanner: 앱이 디버그 모드인 것을 알리는 화면의 구석에 배너를 표시 (디폴트), false로 하면 표시 안 함

MaterialApp 내에 Scaffold 기본 위젯을 사용해서, 전체 화면을 표시하는 것이 일반적인 케이스임

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.red),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(title: const Text('FunCoding')),
      ),
    );
  }
}

Scaffold 위젯 사용법과 주요 property

• MaterialApp 내에서 머티리얼 디자인의 기본 레이아웃 구조를 제공하는 위젯
• 주요 property
  • appBar: 화면의 상단에 있는 앱 바.
    • 보통 value로 AppBar(title: const Text('FunCoding'))와 같이 AppBar 위젯을 넣는 경우가 많음
  • body: 화면의 기본 내용, 일반적으로 위젯의 목록.
  • floatingActionButton: 인터페이스에 위치한 추가 버튼.
    • floatingActionButtonLocation: 부가 버튼의 위치.
  • drawer: Scaffold 위젯의 사이드 메뉴.
  • persistentFooterButtons: 화면 하단에 표시되는 버튼의 행.
  • bottomNavigationBar: 화면 하단에 표시되는 네비게이션 바.
  • backgroundColor: 스캐폴드의 배경색.
  • resizeToAvoidBottomInset: 스크린 키보드를 피하기 위해 body의 크기를 자동으로 조정할지 여부를 설정 (디폴트: true)

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primarySwatch: Colors.blue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: Text('Co Burn Studio'),
        ),
        body: Center(
          child: TextField(
            decoration: InputDecoration(labelText: "입력해보세요"),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          elevation: 10.0,
          child: Icon(Icons.add),
          onPressed: () {},
        ),
        drawer: Drawer(
          child: ListView(
            children: [
              ListTile(title: Text('Item 1')),
              ListTile(title: Text('Item 2')),
            ],
          ),
        ),
        persistentFooterButtons: [
          Icon(Icons.settings),
          SizedBox(width: 5),
          Icon(Icons.exit_to_app),
          SizedBox(width: 10),
        ],
        bottomNavigationBar: BottomNavigationBar(
          currentIndex: 0,
          fixedColor: Colors.green,
          items: [
            BottomNavigationBarItem(
              label: "Home",
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              label: "Search",
              icon: Icon(Icons.search),
            ),
            BottomNavigationBarItem(
              label: "Profile",
              icon: Icon(Icons.account_circle),
            ),
          ],
          onTap: (int indexOfItem) {},
        ),
        backgroundColor: Colors.amberAccent,
        resizeToAvoidBottomInset: false,
      ),
    );
  }
}

AppBar 사용법과 주요 property

• backgroundColor: AppBar 배경색
• elevation: AppBar를 어느 정도 떠오르게 설정 (그림자 깊이가 달라짐)
• title: 보통 Text 위젯으로 타이틀 표시
• centerTitle: true로 설정하면, 타이틀이 가운데 위치
• leading: 제목 앞에 표시되는 위젯. 보통 IconButton 위젯으로 메뉴 등을 표시
• actions: 제목 뒤에 표시되는 위젯. 보통 IconButton 위젯으로 메뉴 등을 표시

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          title: const Text("FunCoding"),
          actions: <Widget>[
            IconButton(
              icon: const Icon(Icons.comment),
              tooltip: 'Comment Icon',
              onPressed: () {},
            ), //IconButton
            IconButton(
              icon: const Icon(Icons.settings),
              tooltip: 'Setting Icon',
              onPressed: () {},
            ), //IconButton
          ], //<Widget>[]
          backgroundColor: Colors.amber,
          elevation: 10.0,
          leading: IconButton(
            icon: const Icon(Icons.menu),
            tooltip: 'Menu Icon',
            onPressed: () {},
          ),
          centerTitle: true,
        ),
      ),
    );
  }
}

Stack 위젯

• Row 위젯은 내부 위젯을 수평으로 나열하는 위젯, Column 위젯은 내부 위젯을 수직으로 나열하는 위젯
• Stack 위젯은 내부 위젯을 겹쳐서 나열하는 위젯

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Stack(
            children: [
              Container(
                width: 400,
                height: 400,
                color: Colors.yellow,
              ),
              Container(
                width: 300,
                height: 300,
                color: Colors.blue,
              ),
              Positioned(
                top: 50,
                left: 50,
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Align 위젯

• 자식 위젯을 특정 위치에 정렬하기 위해 사용하는 위젯
• 특정 위치에 위젯을 배치하기 위한 위젯은 Align과 Positioned가 있지만,
• Positioned는 Stack 안에서만 사용할 수 있고, Align은 독립적으로도 사용 가능함
• Align에서 자식 위젯의 위치는 alignment 속성으로 설정
  • alignment 속성값은 주로 Alignment 클래스 설정값 (예: Alignment.bottomRight, 오른쪽 하단부에 위치)

Alignment 주요 값

• Alignment.topLeft: 위젯을 부모 위젯의 왼쪽 상단 모서리에 맞춤
• Alignment.topCenter: 위젯을 부모 위젯의 상단 중앙에 맞춤
• Alignment.topRight: 위젯을 부모 위젯의 오른쪽 상단 모서리에 맞춤
• Alignment.centerLeft: 위젯을 부모 위젯의 중앙 왼쪽에 맞춤
• Alignment.center: 위젯을 부모 위젯의 중앙에 맞춤
• Alignment.centerRight: 위젯을 부모 위젯의 중앙 오른쪽에 맞춤
• Alignment.bottomLeft: 위젯을 부모 위젯의 왼쪽 하단 모서리에 맞춤
• Alignment.bottomCenter: 위젯을 부모 위젯의 하단 중앙에 맞춤
• Alignment.bottomRight: 위젯을 부모 위젯의 오른쪽 하단 모서리에 맞춤
• Alignment(x, y): 위젯을 (x, y)로 지정된 점에 맞춤. (-1, -1)은 상단 좌측 모서리, (0, 0)은 중앙, (1, 1)은 하단 우측 모서리를 나타냄
• 

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('Align Widget Example'),
        ),
        body: Center(
          child: Container(
            color: Colors.blue,
            height: 200,
            width: 200,
            child: Align(
              alignment: Alignment.bottomRight,
              child: Text(
                'Hello World',
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Expanded 위젯

• 위젯 크기를 수치로 설정하지 않고, 비율로 설정할 때 사용하는 위젯
• 화면 사이즈가 다양할 수 있기 때문에, 수치로 위젯 크기를 설정할 경우, 여러 화면 사이즈 대응이 어려울 수 있음
• 따라서, 비율로 위젯 크기를 설정하는 방법에 대해 알아둘 필요가 있음
• Expanded 위젯의 flex 속성은 각 자식 위젯이 다른 자식 위젯과 비교하여 차지해야 하는 공간의 양을 지정하는 데 사용
• 다음 예제에서는 첫 번째 Expanded 위젯의 flex 속성을 1로, 두 번째 Expanded 위젯의 flex 속성을 2로 설정
  • 첫 번째 Expanded 위젯은 Column의 1/3, 두 번째 Expanded 위젯은 Column의 2/3 공간을 차지하며 화면에 표시됨

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          children: [
            Expanded(
              flex: 1,
              child: Container(
                color: Colors.red,
                child: Center(
                  child: Text('First item'),
                ),
              ),
            ),
            Expanded(
              flex: 2,
              child: Container(
                color: Colors.blue,
                child: Center(
                  child: Text('Second item'),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

SingleChildScrollView 위젯

• 스크롤을 제공하기 위해 사용되는 위젯
• 수직/수평 스크롤을 지정하고자 할 경우, scrollDirection 속성값을 설정할 수 있음
  • scrollDirection: Axis.vertical (수직)
  • scrollDirection: Axis.horizontal (수평)

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('Scrollable Column Example'),
        ),
        body: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                color: Colors.red,
                height: 1000,
                child: Center(
                  child: Text('Header'),
                ),
              ),
              Container(
                color: Colors.green,
                height: 1000,
                child: Center(
                  child: Text('Footer'),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Text 위젯

• layout 위젯들에 따라서, Text를 동일 라인 또는 여러 라인에 출력
• 별도 style을 적용할 수 있으며, style을 적용하지 않으면, DefaultTextStyle 클래스의 style이 적용됨
• style: TextStyle()을 사용해서, 일반적으로 Text 스타일링
• TextStyle() 주요 property

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Hello Flutter',
              style: TextStyle(
                color: Colors.amber,
                fontSize: 30,
                fontStyle: FontStyle.italic,
                backgroundColor: Colors.blue,
                fontWeight: FontWeight.bold,
                letterSpacing: 5,
                wordSpacing: 20,
                decoration: TextDecoration.underline,
                decorationStyle: TextDecorationStyle.wavy,
                decorationColor: Colors.red,
              ),
            )
          ],
        ),
      ),
    );
  }
}

• 이외에 다음과 같은 스타일 적용 가능
  • textAlign: 수평 정렬
    • TextAlign.left // 왼쪽 정렬
    • TextAlign.right // 오른쪽 정렬
    • TextAlign.center // 중앙 정렬
    • TextAlign.justify // 양쪽 정렬
  • textDirection: 텍스트 쓸 방향 지정 (왼쪽부터 오른쪽, 또는 오른쪽부터 왼쪽)
    • TextDirection.rtl // 오른쪽부터 왼쪽으로 텍스트 표시 (반대는 TextDirection.ltr)
  • textOverflow: 텍스트가 넘칠 때의 행동 설정
    • overflow: TextOverflow.ellipsis // 텍스트가 넘치는 부분을 ...로 생략하여 표시
    • overflow: TextOverflow.fade // 텍스트가 넘치는 부분을 서서히 사라지는 효과
    • overflow: TextOverflow.clip // 텍스트가 넘치는 부분을 잘리는 효과
    • TextOverflow.visible // 텍스트가 넘치는 부분을 모두 보여줌
  • softWrap: 공간이 좁을 경우 줄 바꿈 여부 설정
    • softWrap: true // 텍스트가 영역을 넘어가면, 줄바꿈
  • maxLines: 여러 라인에 걸쳐 텍스트 출력 시, 최대 라인 수를 설정