flutter 위젯 사용하기

stless + 탭으로 StatelessWidget 생성

 

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 MaterialApp(
      home: Text('야옹')
    );
  }
}

 

---

2. 아이콘

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.star)
    );
  }
}

Icon(Icons.아이콘)

---

3. 이미지

루트 경로에 assets 폴더 생성 + 이미지 넣기

pubspec.yaml 파일에서 아래 부분 주석 해제

 

# To add assets to your application, add an assets section, like this:
# assets:
#   - images/a_dot_burr.jpeg
#   - images/a_dot_ham.jpeg

이 부분을

#   To add assets to your application, add an assets section, like this:
assets:
  - assets/

이렇게!

assets 디렉토리 하위의 파일들을 사용할 수 있음

 

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('bear.jpg')
    );
  }
}

Image.asset(파일명)

---

4. 네모 박스

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.orange))
    );
  }
}

Container() 또는 SizedBox()

 

position 을 잡아주기 위해서 Center() 또는 Align() 의 자식으로 넣어주기

 

Flutter의 모든 단위는 LP임 (Logical Pixel)

눈으로 보는 절대적인 수치이며 1cm === 38LP

단위를 쓰지 않고 숫자만 넣어주면 됨

---

5. 위젯 중첩하여 사용하기

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(
          child: Text('야옹', style:TextStyle(fontSize: 14, color: Colors.black)),
          width: 50,
          height: 50,
          color: Colors.pinkAccent,
        ),
      )
    );
  }
}

 

---

6. 기본 레이아웃 만들기

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: Scaffold(
        appBar: AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }
}

Scaffold(appBar, body, bottomNavigationBar)

상단 앱바 / 바디 / 하단 내비게이션바

---

7. 여러 개의 위젯 가로 배치하기

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: Scaffold(
        appBar: AppBar(),
        body: Row(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star)
          ]
        ),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }
}

Row(children:[위젯, 위젯, ...])

display: flex + flex-direction: row 와 같다!

---

8. 여러 개의 위젯 세로 배치하기

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: Scaffold(
        appBar: AppBar(),
        body: Column(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star)
          ]
        ),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }
}

Column(children:[위젯, 위젯, ...])

마찬가지로 display: flex + flex-direction: column 과 같음

---

9. 정렬하기

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: Scaffold(
        appBar: AppBar(),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star)
          ]
        ),
        bottomNavigationBar: BottomAppBar(),
      )
    );
  }
}

Row/Column 에

 

mainAxisAlignment: MainAxisAlignment.정렬 넣어주기

justify-content 랑 비슷

 

crossAxisAlignment: CrossAxisAlignment.정렬 넣어주기

align-items 랑 비슷

---

10. Container vs SizedBox

Container 를 쓰면 린트가 경고함!

Container 는 SizedBox 에 비해서 무겁기 때문

width, heidht, child 만 필요할 때는 SizedBox 사용하기!

---

11. 레이아웃 완성

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: Scaffold(
        appBar: AppBar(
          title:Text('야옹앱', style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.pinkAccent,
        ),
        body: Text('냥냥펀치!'),
        bottomNavigationBar: BottomAppBar(
          child: SizedBox(
            height: 100,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],
            )
          )
        ),
      )
    );
  }
}

---

12. margin / padding

EdgeInsets.all(숫자)

EdgeInsets.fromLTRB(left, top, right, bottom)

---

13. border

Border.all(color, ...)

---

14. 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 MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title:Text('야옹앱', style: TextStyle(color: Colors.white)),
          backgroundColor: Colors.pinkAccent,
        ),
        body: Align(
          alignment: Alignment.bottomCenter,
          child: Container(
            width: double.infinity, // 부모 박스 영역 모두 채우기
            height: 50,
            // color: Colors.pinkAccent, 에러. 같은 속성은 한 번만 작성해야 함
            margin: EdgeInsets.all(20),
            padding: EdgeInsets.fromLTRB(0, 10, 0, 0),
            decoration: BoxDecoration(
              color: Colors.pinkAccent,
              border: Border.all(color: Colors.black)
            ),
            child: Text('냥냥펀치!')
          ),
        )
      )
    );
  }
}