[Flutter] 위젯 사용

레이아웃 위에 위젯 작성
 > MaterialApp, Text, Scaffold, Appbar

 @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: Scaffold(
        appBar: AppBar(
          ),
        body: const Text('Flutter'),
      ),
    );
  }

• MeterialApp내의 primarySwatch를 통해 컬러 지정 가능 (Colors. 뒤에 [command + .] 를 통해 색상 자동완성 변경 가능)
• Scaffold를 통해 그려야, 까만화면이 그려지지 않음 
• appBar 가 없는 상태의 Center는 전체의 Center 로 잡힘
• command + . 으로 Wrap Cetner 지정 가능 

---

위젯 추출 해서 코드 나누기
> stateless widget

 

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_application_1/pages/garden_home_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
      home: const GardenHomePage(),
    );
  }
}

• GardenHomePage를 호출하도록 따로 떼기

lib/pages/garden_home_page.dart

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Garden Home Page'),
        ),
        body: const Center (
          child: Text('center'),
        ),
    );
  }
}

 

Center

• Appbar 영역 타이틀, body 텍스트 지정 
• main에서 garden_home_page에 작성한 코드 호출

 

 

 

---

 

단일박스(컨테이너) 위젯 작성

Container, SizedBox, Center

하는이유? Layout을 위해서 <div> 등과같은...처리

 

 

Container 제공옵션

- padding (안쪽여백) / margin (바깥여백) / child / color / alignment 정렬

Alignment 

 - x축은 가로(-1 ~ 0 ~ 1)
 - y축은 세로 (-1 ~ 0 ~ 1) 
 0 은 각각의 센터

      body: Container(
        color: Colors.yellow,
        alignment: const Alignment(1, -1),
        child: const Text('Flutter My Home Page')
        )

 

 

 

color / padding(안쪽여백) / alignment / margin (바깥여백) / width / height

       body: Container (
          color: Colors.yellow,
          alignment: Alignment.topCenter,
          padding: const EdgeInsets.symmetric(
            horizontal:20,
            vertical: 50
            ),
          margin: const EdgeInsets.symmetric(
            horizontal:50,
            vertical: 50
            ),
          width: 100,
          height:300,
          child: const Text('Fluter My Home Page'),
        ),

 

margin 바깥여백

 	body: Container (
          color: Colors.yellow,
          margin: const EdgeInsets.symmetric(
            horizontal:100,
            vertical: 50
            ),
          child: const Text('Fluter My Home Page'),
        ),

padding 안쪽여백

 	body: Container (
          color: Colors.yellow,
          padding: const EdgeInsets.symmetric(
            horizontal:100,
            vertical: 50
            ),
          child: const Text('Fluter My Home Page'),
        ),

 

 

 

body:Container() 옵션값에서 alignment: Alignment.center 주면 그게 boy:Center 와 동일

 

SizedBox

SizedBox는 내가 어떤 위젯을 너비/높이 를 얼만큼 차지하는지? 자식

  body: Container (
          color: Colors.yellow,
          child: const SizedBox(
             width : 200,
             height : 200,
             child: Text(
              'Flutter My Home Page',
              style: TextStyle(fontSize: 20),
              ),
          )
        ),