[Flutter] 기본 위젯 추가

기본 위젯 추가

1. 글자 위젯

2. 아이콘 위젯

3. 이미지 위젯

4. 박스 위젯

 

---

 

1. 글자 위젯

home: Text('HELLO TISTORY!')

 

Text('글 내용') 

원하는 글 내용을 Text(' 여기 ')에 적으면 된다.

 

 

올바른 코드인지 확인을 위해 상단 보이는 Chrome(web) -> RUN 버튼을 눌러 실행되는 페이지를 본다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Text('HELLO TISTORY!')
    );
  }
}

 

 

 

 

 

 

---

2. 아이콘 위젯

 

아이콘 삽입을 위해서는 해당 형태의 코드를 사용하면 된다.

home: Icon(Icons.music_note)

 

아이콘의 이름을 확인하기 위해서는

 

FlutterIcon - Flutter custom icons generator

 

해당 링크에 접속해 마우스오버를 하면 된다.

 

name: 뒤 '해당 이름'을 사용!

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Icon(Icons.music_note)
    );
  }
}

 

 

 

 

 

 

 

 

---

 

3. 이미지 위젯

이미지 위젯 사용 전 이미지용 디렉토리 생성이 필요하다.

해당 루트를 따라 생성해준다.

 

contact -> New -> Directory로 새로운 파일을 생성해 준다.

 

 

파일의 이름을 assets로 설정한다.

 

생성 확인

 

다음,  상단 사진에 보이는 pubspec.yaml 파일의 flutter: 부분을 하단 코드처럼 수정해 준다.

 

flutter:
  assets:
    - assets/

 

assets 파일의 이미지를 사용하기 위한 세팅이 끝났다.

 

 

 

assets 파일에 원하는 사진을 드래그해 넣어준다.

 

 

main.dart로 돌아와

 

home: Image.asset('sim.jpg')

 

해당 코드를 사용하면 이미지가 정상 출력 된다.

Image.asset(' ')의 괄호 속에는 이미지의 이름.확장자 타입을 적어주면 된다 :)

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Image.asset('sim.jpg')
    );
  }
}

 

 

 

 

 

! fm으로는 Image.asset('assets./sim.jpg') 이지만 상단 코드처럼 작성해도 정상 출력이 가능하다.

 

 

 

 

 

 

---

 

4. 박스 위젯

박스 삽입을 위한 코드는 해당 형태를 사용하면 된다.

home: Container()

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Container()
    );
  }
}

 

아무것도 안 보이는 이유는 스타일 지정이 되지 않은 투명 박스이기 때문!

 

따라서 Container() 괄호 안에 스타일 지정을 해주면 된다.

 

 

width: , height를 이용해 박스 크기를 지정해 주고 color:Colors. 를 통해 색을 지정해 준다.

컬러는 상단 사진처럼 쭉 뜨니 원하는 색을 사용하기

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Container(width:50, height:50, color: Colors.indigo)
    );
  }
}

 

와이라노? 

 

정상입니다.

 

좌표 설정을 안 해주었기 때문이다.

어디서부터 박스를 그릴지 지정을 안 함

 

Center( child: 이하 생략)

 

을 사용해 좌표를 설정하고 자식 관계를 만들어 준다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {


    return MaterialApp(
      home: Center(
        child: Container(width:50, height:50, color: Colors.indigo))
    );
  }
}

 

성공!

 

다음엔 네가지 위젯을 모두 사용한 페이지를 만들어 보겠다.

 

---