[Flutter] Basic Widget 살펴 보기

플러터에 공식적인 용어가 정립이 안되어 있음

 

1. layout 위젯
   • visible 위젯을 원하는 위치에 배치하기 위해, layout 위젯을 선택
   • 간단하고 기본적인 layout 위젯은 Container와 Center 위젯
     • 전체 layout 위젯 리스트: https://docs.flutter.dev/development/ui/widgets/layout
2. visible 위젯
   • 간단하고 기본적인 visible 위젯은 다음과 같음

 

Text 위젯

Text('Hello World')

 

Image 위젯

Image.asset('images/lake.jpg')

 

Icon 위젯

Icon(Icons.home)

 

3. visible 위젯을 layout 위젯 안에 넣음

• 모든 layout 위젯은 하나의 자식을 가질 수 있는 위젯과 여러 자식을 가질 수 있는 위젯으로 나눔
  • • 하나의 자식을 가질 수 있는 위젯은 child라는 property를 사용해야 함
    • 여러 자식을 가질 수 있는 위젯은 children이라는 property를 사용해야 함
  • Center 위젯은 수직/수평의 가운데로 정렬하게 하는 위젯
  • visible 위젯은 배경 방향을 지정해줘야 함

 

마지막 라인에 콤마(,)를 붙이면, 다른 언어는 에러가 나지만, Flutter에서는 콤마(,)를 마지막 라인에 붙이는 것을 추천 함.

Center(
  // Text('Hello World') 만 작성하면, 배경 방향을 알 수 없으므로 에러
  // TextDirection.ltr : 왼쪽에서 오른쪽으로 기술
  // TextDirection.rtl : 오른쪽에서 왼쪽으로 기술
  child: Text('Hello World', textDirection: TextDirection.ltr),
  // Icon 테스트
  // child: Icon(Icons.star, textDirection: TextDirection.ltr),
),

 

실습 코드 1

import 'package:flutter/material.dart';

// 코드의 시작점
void main() {
  runApp(const MyApp());
}

// 상태기반으로 위젯을 분류 한다.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.redAccent,
      child: Center(
        child: Icon(
          Icons.holiday_village_outlined,
          textDirection: TextDirection.ltr,
        ),
      ),
    );
  }
}

 

Container 위젯

• 박스를 지정하여 padding, margin, border, background color 등을 설정할 수 있는 기본 위젯
• Container 내에 여러 위젯을 나열하는 것이 일반적임

margin과 padding

• 전부: EdgeInsets.all(10),
• 특정 지정: EdgeInsets.only(top: 10, bottom: 10, left: 10, right: 10),
• 인덱스, 위로, 오른쪽, 아래쪽: EdgeInsets.fromLTRB(50, 10, 30, 40),
• 가로, 세로: EdgeInsets.symmetric(horizontal: 20, vertical: 50),

import 'package:flutter/material.dart';

// 코드의 시작점
void main() {
  runApp(const MyApp());
}

// 상태기반으로 위젯을 분류 한다.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.amberAccent,
      margin: EdgeInsets.symmetric(vertical: 100, horizontal: 0),
      child: Center(
        child: Text('안녕 나의 위젯~', textDirection: TextDirection.ltr),
      ),
    );
  }
}

 

border

• Container 위젯에 border를 적용하려면, decoration: BoxDecoration()을 넣어줘야 함

import 'package:flutter/material.dart';

// 코드의 시작점
void main() {
  runApp(const MyApp());
}

// 상태기반으로 위젯을 분류 한다.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.amberAccent, docoreation 속성 사용시 color 속성 넣으면 오류 발생
      margin: EdgeInsets.symmetric(vertical: 100, horizontal: 0),
      decoration: BoxDecoration(
        color: Colors.blue,
        border: Border.all(
          width: 1,
          color: Colors.black,
        ),
      ),
      child: Center(
        child: Text('안녕 나의 위젯~', textDirection: TextDirection.ltr),
      ),
    );
  }
}

border radius

• 전부 적용1: BorderRadius.circular(10)
• 전부 적용2: BorderRadius.all(Radius.circular(10))
• 특정 방향만 적용: BorderRadius.only(topLeft: Radius.circular(10))

borderRadius: BorderRadius.only(
  topLeft: Radius.circular(50),
  topRight: Radius.circular(50),
  bottomLeft: Radius.circular(50),
  bottomRight: Radius.circular(50),
),

import 'package:flutter/material.dart';

// 코드의 시작점
void main() {
  runApp(const MyApp());
}

// 상태기반으로 위젯을 분류 한다.
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Container(
      // color: Colors.amberAccent, docoreation 속성 사용시 color 속성 넣으면 오류 발생
      margin: EdgeInsets.symmetric(vertical: 100, horizontal: 0),
      decoration: BoxDecoration(
        color: Colors.blue,
        borderRadius: BorderRadius.circular(50.0),
        // borderRadius: BorderRadius.all(
        //   Radius.circular(
        //     10.0,
        //   ),
        //),
        border: Border.all(
          width: 1,
          color: Colors.black,
        ),
      ),
      child: Center(
        child: Text('안녕 나의 위젯~', textDirection: TextDirection.ltr),
      ),
    );
  }
}

Row와 Column 위젯

• Row 위젯: 위젯들을 수평으로 배치하는 위젯
• Column 위젯: 위젯들을 수직으로 배치하는 위젯
• Column과 Row 위젯은 children property를 가져서, 여러 자식을 가질 수 있음
  • children은 여러 자식을 가지므로, [] 리스트로 위젯을 표기해야 함

 

주축방향 정렬

mainAxisAlignment

: Row 위젯에서는 수평 정렬, Column 위젯에서는 수직 정렬을 설정

• start: 주축의 시작점에서 자식 위젯들을 배치
• end: 주축의 끝점에서 자식 위젯들을 배치
• center: 주축의 중간에 자식 위젯들을 배치
• spaceBetween: 자식 위젯 사이에 공간을 균등하게 배치
• spaceAround: 자식 위젯 사이에 공간을 균등하게 배치하고, 첫 번째와 마지막 자식 위젯 앞뒤에 균등한 공간의 절반을 배치
• spaceEvenly: 자식 위젯 사이에 공간을 균등하게 배치하고, 첫 번째와 마지막 자식 위젯 앞뒤에 균등한 공간을 배치

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


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

// 상태 여부 위젯 선정 

// const, final
// const <--- 컴파일 시점에 초기화 되는 코드를 사용
// final <--- 런타임 시점에 초기화 되는 코드를 사용 
class MyHome extends StatelessWidget {
  // const 생성자
  const MyHome({super.key});

  // build 메서는 화면에 그림을 그려주는 메서드 이다.
  @override
  Widget build(BuildContext context) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      // 자료구조 - 리스트를 나태낸다.
      children: [
        Container(
          width: 50,
          height: 50,
          color: Colors.red,
          margin: const EdgeInsets.only(bottom: 50),
        ),
        Container(
          width: 50,
          height: 50,
          color: Colors.blue,
        ),

      ],
    );
  }
}

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';


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

// 상태 여부 위젯 선정 

// const, final
// const <--- 컴파일 시점에 초기화 되는 코드를 사용
// final <--- 런타임 시점에 초기화 되는 코드를 사용 
class MyHome extends StatelessWidget {
  // const 생성자
  const MyHome({super.key});

  // build 메서는 화면에 그림을 그려주는 메서드 이다.
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        // 주축 방향 정렬
        mainAxisAlignment: MainAxisAlignment.center,
        // 교차축 방향 정렬
        crossAxisAlignment: CrossAxisAlignment.center,
        // 자료구조 - 리스트를 나태낸다.
        children: [
          Container(
            width: 50,
            height: 50,
            color: Colors.red,
            margin: const EdgeInsets.only(bottom: 50),
          ),
          Container(
            width: 50,
            height: 50,
            color: Colors.blue,
          ),

        ],
      ),
    );
  }
}