[Flutter] 16. 플러터 기본기 다지기 - (4) Basic Widget 살펴 보기

[Flutter] 16. 플러터 기본기 다지기 - (4) Basic Widget 살펴 보기

 

*Flutter에 공식적인 용어가 정립되어 있지 않다!

 

 

1. layout 위젯

• visible 위젯을 원하는 위치에 배치하기 위해 layout 위젯을 사용한다.
• 간단하고 기본적인 layout 위젯은 Container와 Center 위젯

 

 

2. visible 위젯

• 간단하고 기본적인 visible 위젯은 아래와 같다.

 

(1) Text 위젯

Text('Hello World')

 

(2) Image 위젯

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

 

(3) Icon 위젯

Icon(Icons.home)

 

 

 

3. Visible 위젯을 Layout 위젯 안에 넣음

• 모든 Layout 위젯은 하나의 자식을 가질 수 있는 위젯과, 여러 자식을 가질 수 있는 위젯으로 나뉘어진다.

-> 하나의 자식을 가질 수 있는 위젯 : child라는 property 사용

-> 여러 자식을 가질 수 있는 위젯 : children이라는 property 사용

• Center 위젯은 수직/수평의 가운데로 정렬하게 하는 위젯
• Visible 위젯은 배경 방향을 지정해줘야 한다.

 

 

 

4. Containter 위젯

• 박스를 지정해 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),

 

---

 

테스트 코드

 

(1) Icon 써보기

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

// 코드의 시작점
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
          ,),
      ),
    );
  }
}

 

 

(2) Container - Text 위젯 써보기

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

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

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

  @override
  Widget build(BuildContext context){
    return Container(
      color: Colors.redAccent,
      margin: EdgeInsets.only(left:0,bottom:100,top:100,right:0),
      child:Center(child:Text('안녕 나의 위젯~',textDirection: TextDirection.ltr)
      )
    );
  }
}

 

 

-symmetric으로 주면 수평/수직마다 마진을 줄 수 있다.

margin: EdgeInsets.symmetric(vertical: 100, horizontal: 0),

 

 

-padding을 줄 수도 있다.

 padding: EdgeInsets.symmetric(vertical: 100, horizontal: 0),

 

 

(3) Decoration 속성

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

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

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

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

 

 

(4) BorderRadius 속성

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

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

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

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

 

 

-이렇게 한 번에 쓸 수도 있다.

borderRadius:BorderRadius.circular(100.0),