플러터 기본 위젯 예제(MaterialWidget) - container 실습

지금부터 빠르게 기록을 하기 위하여, 최대한 코드 및 기본적인 주석만 하도록 하겠습니다. 

많은 분들에게 기본적인 도움이라도 되길 바라며, 학습 목적 외에 상업적 이용은 금합니다. 

 

출처: 패스트캠퍼스 15개 프로젝트로 실무까지 끝내는 Dart & Fultter 앱 개발, 챗 gpt

출처: https://forfire700.tistory.com/148 [IT STUDY CAFE:티스토리]

 

---

코드

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Study to Container'),
          centerTitle: true,
          backgroundColor: Colors.blue,
        ),
        body: CustomContainer(),
      ),
    ),
  );
}
 
class CustomContainer extends StatelessWidget {
  const CustomContainer({super.key});
 
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        height: 300,
        padding: EdgeInsets.fromLTRB(10, 12, 10, 12),
        decoration: BoxDecoration(
            color: Color(0xFF5ABB62),
            border: Border.all(
                color: Colors.red, width: 5, style: BorderStyle.solid),
            borderRadius: BorderRadius.circular(120),
            boxShadow: [
              BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: Offset(6, 6),
                  blurRadius: 10,
                  spreadRadius: 10),
              BoxShadow(
                  color: Colors.black.withOpacity(0.3),
                  offset: Offset(-6, -6),
                  blurRadius: 10,
                  spreadRadius: 10),
            ]),
        child: Center(
            child: Container(
                color: Colors.yellow, child: Text('Hello Container'))),
      ),
    );
  }
}
 

---

주석

주석은 어디까지나 가이드입니다. 한번 코드를 따라해보시거나 하시면서, 분석하시면 이해가 조금 더 쉬우실 겁니다.

1. Entry Point (main function):
   • main function is where the Flutter application starts.
   • runApp function is called to run the application, which takes a widget as an argument.
2. MaterialApp Widget:
   • This widget is a container for the entire application and provides several utilities and configurations.
   • home property is set to a Scaffold widget.
3. Scaffold Widget:
   • Represents a basic layout structure for the application.
   • Contains an AppBar and a body.
4. AppBar Widget:
   • Displays a bar at the top of the scaffold.
   • Configured with a title (Text('Study to Container')), centered (centerTitle: true), and blue background (backgroundColor: Colors.blue).
5. body Widget:
   • Contains a custom widget CustomContainer.
6. CustomContainer Class (StatelessWidget):
   • Represents a custom widget defined in the code.
   • Builds a centered Container with specific styling:
     • Width and height of 300 pixels.
     • Padding of 10 pixels on the top and bottom, and 12 pixels on the left and right.
     • Decorated with a greenish color (Color(0xFF5ABB62)), a red border (Border.all(color: Colors.red, width: 5, style: BorderStyle.solid)), rounded corners (BorderRadius.circular(120)), and two black shadows with opacity.
   • Contains a nested Container as its child:
     • This inner container has a yellow background color (Colors.yellow) and contains a Text widget displaying "Hello Container".

Flow and Functionality Summary:

• The main function sets up a MaterialApp with a Scaffold containing an AppBar and a body that renders a CustomContainer widget.
• CustomContainer is a widget defined separately, which creates a styled container with nested content (another container with text).

This Flutter code snippet demonstrates how to create a structured UI with nested widgets, apply styling using Flutter's BoxDecoration and BoxDecoration classes, and handle basic layout and presentation aspects of a mobile application.