[Flutter/Widget] Scaffold, Container, BoxDecoration, AppBar

앤써북의 ⌜모두가 할 수 있는 플러터 UI 입문⌟을 참고하여 작성하였습니다.

 

 

📌  이번 글은

책의 샘플 앱을 만들면서 공부한 위젯 정리입니다.

 

Scaffold

• MatarialApp안에 디자인할 때 구조가 있는 도화지
• appBar 속성: Scaffold 상단에 표시할 앱 바 (AppBar 위젯 사용)
• bady 속성: Scaffold의 기본 콘텐츠

 

AppBar

• material design의 앱 바
• 위젯 구조
  
  

 

Container 

• 빈 박스 위젯
• decoration 속성: 박스 색상, 모양, 테두리 선 변경 가능 (BoxDecoration 위젯 사용)

 

BoxDecoration

• Box 를 그리는 다양한 방법을 제공
• border 속성: Box border 색상, 굵기
• borderRadius 속성: Box border 모양

 

👩🏻‍💻 사용 예제

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(               // *** Scaffold 위젯 ***
        appBar: AppBar(             // *** AppBar 위젯 ***
          title: Text('Container'),
          centerTitle: true,
        ),
        body: Center(
          child: Container(          // *** Container 위젯 ***
            width: 200,
            height: 300,
            // decoration 속성: Container 꾸미기
            decoration: BoxDecoration(  // *** BoxDecoration 위젯 ***
              color: Colors.lightBlueAccent,
              // border 속성: Box border 섹상, 굵기
              border: Border.all(
                color: Colors.black12,
                width: 2.0,
              ),
              // borderRadius 속성: border 모양
              borderRadius: BorderRadius.circular(30),
            ),
          ),
        ),
      ),
    );
  }
}

 

 

 

 

 

🙋🏻‍♀️ 참고

최주호, 정호준, 정동진 공저, ⌜모두가 할 수 있는 플러터 UI 입문⌟, 앤써북(2021), p122~p123