단일 박스(컨테이너) 위젯 작성 Container, SizedBox, Center

단일 박스(컨테이너) 위젯 작성 Container, SizedBox, Center

Container

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
              child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
      body: Container(
          color: Colors.blueGrey.shade100,
          // x축 = 0 : center
          // y축 = 0 : center
          alignment: const Alignment(0, -0.7),
          // alignment: Alignment.center, // 지금 있는 위치의 센터
          // alignment: Alignment.centerLeft,
          // alignment: Alignment.topCenter,
          // alignment: Alignment.bottomCenter,
          // padding: const EdgeInsets.all(10), // 패딩 상,하,좌,우 10 만큼 설정
          padding: const EdgeInsets.symmetric(
            // 패딩 좌우, 상하 설정
            horizontal: 10,
            vertical: 50,
          ),
          margin: const EdgeInsets.symmetric(
            // 마진 좌우, 상하 설정
            horizontal: 50,
            vertical: 50,
          ),
          width: 200,
          height: 300,
          child: const Text('Flutter My Home Page')), // body내의 center로
    );
  }
}

SizedBox

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
              child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
      body: Container(
        color: Colors.blueGrey.shade100, // SizedBox를 보기 위한 컬러 설정
        // SizedBox : 자식의 위젯을 다음과 같이 설정할때
        // Text위젯 크기를 너비200, 높이 200설정
        child: const SizedBox(
          // width: 200,
          // height: 200,
          child: Text(
            'Flutter My Home Page',
            style: TextStyle(fontSize: 20), // 폰트 사이즈 숼정
          ),
        ),
      ), 
    );
  }

Padding

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
              child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
      body: const Padding(
        // 위젯이 패딩 역할 밖에 없으면 Padding으로 위젯을 감싸기
        padding: EdgeInsets.all(20),
        child: Text(
          'Flutter My Home Page',
          style: TextStyle(fontSize: 20), // 폰트 사이즈 숼정
        ),
      ),
    );
  }

다트패드 복붙

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      // home: const FlutterHomePage(),
      home: const MyHomePage(),
      // home: const _MyPrivatePage(),
    );
  }
}


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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: const Center(
              child: Text('Flutter my AppBar'))), // 상단바 생성 가운데로 타이틀은 Text위젯,
      body: const Padding(
        // 위젯이 패딩 역할 밖에 없으면 Padding으로 위젯을 감싸기
        padding: EdgeInsets.all(20),
        child: Text(
          'Flutter My Home Page',
          style: TextStyle(fontSize: 20), // 폰트 사이즈 숼정
        ),
      ),
    );
  }
}

https://stealth-mandarin-b2b.notion.site/a829682c990c419489ac1a05d0c5c980