[Flutter]03 가로세로 배치법과 Scaffold

ref : 코딩 애플 [쉽게 배우는 플러터 강의]

---

MaterialApp() 이라는 위젯을 알아보자

이 위젯을 쓰면 구글이 제공하는 Material 테마를 이용해서 앱을 만들 수 있다.

근데 이건 구글 스타일이고

나는 아이폰 기본 스타일의 앱을 만들고 싶다 라고하면 다른 위젯을 쓰고 사용하면 됨.

 

만약에 내가 직접 커스터마이징 하고싶다 라고 한다면 

그래도 MaterialApp()을 써야한다.

이 위젯 안에 디자인만 포함되는게 아니라 기본 세팅들도 포함하고 있기 때문임.

---

Scaffold() 위젯

 

이 위젯은 앱을 우리가 흔히 아는 '상 중 하'로 나누어준다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        appBar : AppBar(),
        body: Container(),
        bottomNavigationBar: BottomAppBar(),
      )
    );

  }
}

appBar, Body, bottomNavigationBar 로 나누어진다.

---

아이콘을 3개 나란히 넣어보려고 한다(가로로)

일단 한개를 넣어보았다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Container(
          child : Icon(Icons.star)
        ),
      )
    );

  }
}

Scaffold 는 기준점을 자동으로 왼쪽 위로 잡아준다.

여러 위젯을 가로로 배치하려면

Row( children : [ ] )

처럼 쓰면 된다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Row(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        )
      )
    );

  }
}

세로로 배치 하고 싶으면 Column( children : [] ) 로 하면 되겠다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Column(
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        )
      )
    );

  }
}

---

Row, Column 요소들을 센터로 정렬하려면

mainAxisAlignment: MainAxisAlignment.center

을 추가한다

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        )
      )
    );

  }
}

뒤에 center를 다른걸로 활용해 볼수도 있겠다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        )
      )
    );

  }
}

css 의 display : flex 와 유사하다

---

Row 의 mainAxis 는 가로축을 정렬할 수 있고

Row 의 corssAxis 는 세로축을 정렬할 수 있다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        )
      )
    );

  }
}

 

 

 

Row 를 Column으로 바꿔보면

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        body: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Icon(Icons.star),
            Icon(Icons.star),
            Icon(Icons.star),
          ],
        )
      )
    );

  }
}

세로축으로 spaceAround 으로 정렬된 것을 볼 수 있다.

 

Tip..?

뭐쓸지 기억안나면 단축기 ctrl + space 누르자 

자동완성 뜬다

 

그리고 파라미터 우측에 뭐 쓸지 생각안나면

1. 파라미터를 대문자로 써보기

2. 파라미터 위에 마우스 올리기 -> 타입 알려줌(타입 그대로 가져다 쓰기)

3. 구글링하기

 

 

숙제 한번 만들어보자

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        appBar: AppBar( title: Text('앱임'),),
        body: Text('안녕'),
        bottomNavigationBar: BottomAppBar(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Icon(Icons.phone),
              Icon(Icons.message),
              Icon(Icons.contact_page),
            ],
          ),
        ),
      )
    );

  }
}

근데 하단바가 너무 낮다

BottomAppBar 의 높이 조절을 해보고 싶다.

Container 안에 Row를 넣으면 폭 조절을 할 수 있다.

저렇게 Row 옆에 전구 모양 아이콘에 마우스 갖다대면 Wrap with Container가 뜬다

이렇게 하면 복잡하게 고칠거 없이 편하게 수정할 수 있다.

Container 로 감싼 뒤에 height 값을 넣어줬다

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home : Scaffold(
        appBar: AppBar( title: Text('앱임'),),
        body: Text('안녕'),
        bottomNavigationBar: BottomAppBar(
          child: Container(
            height: 70,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Icon(Icons.phone),
                Icon(Icons.message),
                Icon(Icons.contact_page),
              ],
            ),
          ),
        ),
      )
    );

  }
}

하단바의 높이가 조절 된 모습을 볼 수 있다.

근데 Container에 밑줄이 있는 걸 보니 Lint가 잡은 것 같다.

마우스를 올려보면 SizedBox 로 대체하라는 문구가 뜬다.

Container 말고 SizedBox 라는 위젯을 써보자

밑줄이 사라진다

 

Container 위젯은 좀 무거운 편이다.

width, height, child 만 필요한 박스는 SizedBox()를 쓰는게 성능상 이점이 있을 수 있다.

 

숙제 완료!!