new Project : Instagram 만들기

line 추가

# yaml
rules:
  prefer_typing_uninitialized_variables: false
  prefer_const_constructors_in_immutables: false
  prefer_const_constructors: false
  avoid_print: false
  prefer_const_literals_to_create_immutables: false

테마 스타일 가져오기

void main() {
  runApp(MaterialApp(
    theme: ThemeData(), // 여기에 css 다 다을 수 있는 것임
    home: MyApp()
    )
  );
}

ThewmeData 가 style과 같은 것임 css 같은 거..

통일성을 주기 위해서 장점이 있음

      iconTheme: IconThemeData( color: Colors.blue ) // 이렇게하면 모든 아이콘이 파란색이 된다.

그런데 여기엔 원칙이 있음.

// 테마 데이터
iconTheme: IconThemeData( color: Colors.blue ), // 이렇게하면 모든 아이콘이

// 앱바 데이터
appBar: AppBar (actions: [Icon(Icons.star)]),

이렇게 사용하면 앱바에서는 하얀색 아이콘이 뜬다… 왜그럴까

원칙이 있음. : 조금더 가까운 스타일을 가져온다. 그래서 쟤를 반영하고 싶으면

AppBarTheme 안에 IconTheme 을 넣어줘야 함. 약간 복잡하기 때문에 그 때 그 때 구글을 찾아가면서 해야함.

textTheme: TextTheme(
        bodyText2 : TextStyle(color: Colors.red)
      )

위와 같이 사용하면 Text(‘문자열’) 이 적색으로 표시된다.

관련 규칙은 다음과 같음

Text() 는 bodyText2
ListTile()은 subtitle1
textButton은 button 
AppBar()는 headline6 
...

위와 같이 가져다 쓴다고 생각하면 됨

변수로 만들 수 있지 않을까

var a = TextStyle(); 이런식으로 하면 a만 넣어주면 해당 스타일 가져옴.

새로운 프로젝트의 앱바 디자인

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
      iconTheme: IconThemeData( color: Colors.blue ), // 이렇게하면 모든 아이콘이
      appBarTheme: AppBarTheme(
        color: Colors.white,
        elevation: 1, // 그림자 크기
        titleTextStyle: TextStyle(color: Colors.black, fontSize: 25),
        actionsIconTheme: IconThemeData(color: Colors.black)
      ),
      textTheme: TextTheme(
        bodyText2 : TextStyle(color: Colors.red)
      )
    ), // 여기에 css 다 다을 수 있는 것임
    home: MyApp()
    )
  );
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold (
      appBar: AppBar(
          title: Text('Instagram'),
          actions: [IconButton(
              icon: Icon(Icons.add_box_outlined),
            onPressed: (){},
            iconSize: 30,
          )]),
      body: Text('안녕'),
    );
  }
}

자 이 긴 코드를 다른 파일들로 분핧해서 불러오자.

/lib 폴더 안에 넣으면 된다.

// style.dart 파일 만들어서 아래와 같이 입력
import 'package:flutter/material.dart';

var theme = ThemeData(
  iconTheme: IconThemeData( color: Colors.blue ), // 이렇게하면 모든 아이콘이
  appBarTheme: AppBarTheme(
  color: Colors.white,
  elevation: 1, // 그림자 크기
  titleTextStyle: TextStyle(color: Colors.black, fontSize: 25),
  actionsIconTheme: IconThemeData(color: Colors.black)
  ),
  textTheme: TextTheme(
  bodyText2 : TextStyle(color: Colors.red)
  )
);

// main.dart 에서 아래와 같이 가져옴
import 'style.dart' as style;

runApp(MaterialApp(
    theme: style.theme,
    home: MyApp()
    )
  );

그리고 그냥 import 할 때는 변수명이 겹치는 문제를 조심할 것. 그를 해결할 수 있는 방법 안전하게 import as 문법

두번째 방법 : 다른 곳에서는 안썼으면 좋겠다면 var _var1; 이런식으로 만들면 private 선언이 됨.

ThemeData에서 버튼 디자인 변경하려면

// style.dart
ThemeData(
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      primary: Colors.black,
      backgroundColor: Colors.orange,
    )
  ),elevatedButtonTheme: ElevatedButtonThemeData(
    
  ),

) 

// main.dart
body: TextButton(onPressed: (){}, child: Text('안녕'),),

이런 식으로 쓰면 이제 모든 TextButton 위젯 색이 변함 (참고) styleFrom()은 ButtonStyle() 사본을 하나 생성해주는 함수입니다. 그냥 요즘 버튼은 이렇게 스타일링하라고 되어있기 때문에 쓰는 것일 뿐

레이아웃 중간에 ThemeData() 생성 가능

body: Theme(
        data: ThemeData(
          textTheme: 
        ),
        child: Container(),
      ),

근처에 있는 애 Theme 를 가져오는 것.

Theme.of 를 사용하면 됨

body: Text('안녕', style: Theme.of(context).textTheme.bodyText2,)

숙제

BottomNavigatonBar 만들기

• home_outlined
• shopping_bag_outlined

bottomNavigationBar: BottomNavigationBar(
        showSelectedLabels: false,
        showUnselectedLabels: false,
        items:[
          BottomNavigationBarItem(icon: Icon(Icons.home_outlined), label: '홈'),
          BottomNavigationBarItem(icon: Icon(Icons.shopping_bag_outlined), label: '샵'),
        ]
      ),