[코딩애플] 쉬운 플러터 4강 : AppBar (아빠)

배경색상을 변경하고 appBar의 글자를 중앙정렬한 것과 같이 지난 시간에 배운 것을 살짝 응용해보았다

import 'dart:ui';

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: Center(
        child: Scaffold(
          appBar: AppBar(
            centerTitle: true,
            backgroundColor: Colors.blueAccent,
            title: Text('Lottery Machine'),
            titleTextStyle: TextStyle(
                color: Colors.white,
                fontSize: 30,
                fontFamily: 'RobotoMono',
            ),
          ),
          body: Container(),
          bottomNavigationBar: BottomAppBar(
            child: SizedBox(
              height: 50,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  Icon(Icons.phone),
                  Icon(Icons.message),
                  Icon(Icons.ads_click),
                ],
              )
            ),
          ),
        ),
      )
    );
  }
}

 

이번 시간에는 Typography에 대해서 배워본다.
레이아웃 혼자서도 잘 짜는 법을 알려주겠다

body 안에 SizedBox() 넣고 

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('Application')
        ),
        body: SizedBox(
          child: Text('Hello',
              style: TextStyle(fontSize: 90, fontWeight: FontWeight.w300, color: Color.fromRGBO(200, 20, 30, 100)),
          ),
        ),
      )
    );
  }
}

 

---

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('Application')
        ),
        body: Container(
          alignment: Alignment.topCenter,
          child: SizedBox(
            child: Icon(Icons.star, color: Colors.amber, size: 100,),
          ),
        ),
      )
    );
  }
}

 

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('hello', style: TextStyle(color: Colors.amber) ),

        ),
        body: SizedBox(
          child: IconButton(
            icon: Icon(Icons.star),
            onPressed: (){},
          )
        )
      ),
    );
  }
}

 

AppBar title에 색상을 넣고 싶을 때는 Text 괄호 안에다가 style: TextStyle 해서 넣어야 한다.

몬가 복잡해보이는 구조.......

appBar: AppBar(
  leading: Icon(Icons.app_registration_sharp), title: Text('로또 어플'),
),

leading은 맨 왼쪽 어플 서랍 모양처럼 왼쪽 윗 구석에 넣는 것이고, 
title을 따로 입력해서 넣으면 된다.

appBar: AppBar(
  actions : [Icon(Icons.stars), Icon(Icons.ads_click)],
  leading: Icon(Icons.app_registration_sharp), title: Text('로또 어플'),
),

 

actions 는 List 형태인데, 오른쪽 위에 아이콘들을 박을 수 있다. 

 

---

또 숙제가 있다 

당근마켓 레이아웃을 그대로 만들어 오는 것이다.

비슷하게 만들어 오십시오. 

품목과 함께 

1. 명확한 원본 디자인이 필요하다 / 예시디자인 준비

2. 예시화면에 네모 박스들을 그린다. 

3 바깥 상자들부터 Container 아니면 SizedBox를 이용해서 코드를 입력한다.
가로로 배치하면 Row

세로로 배치해야 한다면 Column

그 다음 마무리 디자인 / 마진, 색상, 정렬 등