ThemeData/appbar

dawner·2022년 5월 13일
0

복습앱 - 개발일지

목록 보기
1/5

한 것

  • style 주는 방법 (ThemeData)
  • instagram 상단바

내일 할 것

  • 자식위젯이 부모위젯의 state을 변경하는 법 - 정리 후 코딩
  • 내 폰의 데이터 (사진, 동영상) 가져오기

문제

  • 상단바의 leading 의 text크기를 키워야한다.
    키웠는데 글씨크기만 커졌지, 옆으로 늘어나지 않는다.
    박스로 감싸고 박스크기를 늘리면 옆으로 글씨가 늘어날거라 생각했다.

근데 그러면, style을 모아두는 기능인 ThemeData를 사용하는 의미가 없어졌다.

그래서 ThemeData안에 leading text를 키우는 것을 찾아봤는데 없음.
var로 하는 것도 아님
그래서 ThemeData배우기 전에 하던것처럼 ThemeData이나 var로 띠로 빼지않고 직접 지정해줬다.

그랬더니 글씨가 깨졌다.

해결

답을 봤더니, 강사님은 ThemeData안에서 size를 조정했다.
강사님은 title의 size를 키우심.

나는 leading 의 size를 키우려고 한 것이 문제 였다.
당연히 appbar에서 맨왼쪽에 오는 것? 은 leading이라 생각함. title이 될 수 있다는 것을 배움.

오늘 새로 배운 것 - 정리 🔥

  1. MaterialApp을 밖에 빼고 시작하면, 편하다 !
void main() {
  runApp(MaterialApp(
    home : MYAPP());
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}
  1. action:[]
    appbar상단바를 3개로 나눌 수 있다.
    leading, title, action
    그 중, action은 안에 넣을 것들을 중괄호[]로 감싼다.
  1. size 조정법

size도 style 중 하나이다.
그래서
스케치 도구 중 text만 빼고, size를 조정하려면 ThemeData 안에 넣는다.

text는 style 조정할 때
ThemeData 안에 넣지 않고, var변수로 따로 빼서 한다.

그러나, text는 style중에서 size를 조정할 때는 var로 하지 않는다.

size를 조정하려면 원본에서 container를 감싸고, 박스의 크기를 키움...

  • 답보니까, titlesize를 ThemeData 안에 넣어서 size조정함. 나는 leading으로 했어서 안됐나?? 잘 모르겠다. 내일 다시 해보기..
  1. style중복시,해결방법

가장 가까운 스타일을 따라하려고 함그래서 중복이 발생함
해결방법은 내 맘대로 안되는 위젯을 단독으로 style지정하기

  1. text스타일의 문제와 해결방법

textTheme 안에서 정할 수 있는 글자스타일종류들이 되게 되게 많다.
외우지 말자.

text는 style 조정할 때는 그냥, ,,
ThemeData 안에 넣지 않고, var변수로 따로 빼서 한다.

힘든 것

  • 감기 걸린 탓이겠지. . 되게 하나 배우는데 오래걸린다. (욕심인가?)
    재밌는데 배우고 수정하는데 오래걸려서 화가난다.

5.11 / 오늘 한 일 / 코드

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    theme: ThemeData(
        iconTheme: IconThemeData(color: Colors.black, size: 35),
        appBarTheme: AppBarTheme(
          color: Colors.white,
          actionsIconTheme: IconThemeData(color:Colors.black)
        )
    ),
    home : MYAPP()
    )
  );
}

var text1 = TextStyle (color : Colors.black,fontSize: 20);



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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: Container(
          width: 100,
          child: Row(
            children: [
              Text("Instagram", style: text1),
            ],
          ),
        ),
        actions: [IconButton (icon:Icon(Icons.add_box_outlined), onPressed:(){})]
      ),
    );
  }
}

0개의 댓글