[Flutter]05 AppBar

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

---

글자를 [자식]을 이용해서 넣어보자

child 안에 Text 를 넣어주면 된다.

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: SizedBox(
              child : Text('안녕하세요'),
            ),
        )
    );

  }
}

 

글자에 스타일을 주고 싶으면?

style : TextStyle()

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: SizedBox(
              child : Text('안녕하세요',
                style: TextStyle( color: Colors.red ),
              ),
            ),
        )
    );

  }
}

color 를 넣는데에는 두 가지 방법이 있다

1. Colors.컬러명

2. Color(0xffaaaaaa)

3. Color.fromRGBO()

저렇게 왼쪽에 color picker 가 뜨니까 저걸 이용해도 되겠다.

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: SizedBox(
              child : Text('안녕하세요',
                style: TextStyle( color: Color(0xffaaaaaa) ),
              ),
            ),
        )
    );

  }
}

아니면 세번째 방법인 Color.fromRGBO() 를 사용해도 된다.

---

글자 크기를 지정해보자 

fontSize 로 지정하면 된다.

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: SizedBox(
              child : Text('안녕하세요',
                style: TextStyle( fontSize: 30 ),
              ),
            ),
        )
    );

  }
}

TextStyle 안에서 ctrl + space 해보면

되게 많은 것들이 뜬다.

그때그때 필요한 것을 찾아서 쓰자.

 

자주 쓰는건 fontWeight 도 있다.

글자의 두께를 지정한다.

 

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: SizedBox(
              child : Text('안녕하세요',
                style: TextStyle( fontWeight: FontWeight.w700  ),
              ),
            ),
        )
    );

  }
}

---

아이콘 디자인 하는법

 

아이콘은 color랑 size가 끝이다.

---

버튼 디자인 하는 법

 

1. TextButton()
2. IconButton()
3. ElevatedButton()

 

버튼 넣고 싶을 때 택 1

 

버튼 위젯들에는 2개의 파라미터가 들어가야한다.

child 랑 onPressed

 

TextButton 부터 써보자

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: SizedBox(
              child : TextButton( child: Text('글자') ,
                onPressed: (){} ,
              )
            ),
        )
    );

  }
}

색이 채워진 버튼을 만들려면 ElevatedButton 을 써야한다.

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: SizedBox(
              child : ElevatedButton( child: Text('글자') ,
                onPressed: (){} ,
              )
            ),
        )
    );

  }
}

튀어나온듯한 느낌의 버튼이 만들어졌다.

 

버튼을 더 디자인하려면?

자동완성을 켜보니 style 이 뜬다.

버튼 디자인은

style : ButtonStyle() 이 들어가야한다.

넣을 수 있는게 많아 보인다.

---

IconButton 을 사용해보자.

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: SizedBox(
              child : IconButton(
                icon: Icon(Icons.star),
                onPressed: (){},
              )
            ),
        )
    );

  }
}

IconButton() 안에 icon : 을 넣어주어야 한다.

별모양의 버튼을 하나 만들어줬다.

---

AppBar 디자인을 해보자

 

AppBar() 안에 넣을 수 있는 것들 

• title : 왼쪽 제목
• leading : 왼쪽에 넣을 아이콘
• actions : [우측 아이콘들]   <-리스트라 여러개 넣을 수 있음.

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(actions : [Icon(Icons.account_box),Icon(Icons.star)], leading: Icon(Icons.star),title : Text('앱임')),
            body: SizedBox(
            ),
        )
    );

  }
}

---

레이아웃 혼자서 잘 짜는 법

 

1. 예시 디자인 준비(명확한 원본 디자인)

2. 예시화면에 네모그리기(빈공간 없게)

3. 바깥 네모부터 하나하나 위젯으로 만들기

4. 마무리 디자인 넣기