[Flutter] 상단바, 콘텐츠 박스 - App Bar, SizedBox

yunulog·2022년 11월 16일

Flutter

목록 보기

5/8

글자 스타일

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("APP")),
    body: SizedBox (
      child: Text('안녕하세요',
      style: TextStyle(
          fontWeight: FontWeight.w700,
          color:Colors.red
				)
      ),
    )
  )
);

색 주는 법

Colors.컬러명
Colors.red
Color(0xffaaaaaa) : 0xff 뒤에 #을 제외한 컬러 헥스코드
Color(oxfff70000)
Color.fromRGBO() : 차례로 R, G, B, 불투명도 설정
Color.fromRGBO(247 0 0 100)

폰트 두께 변경

fontWeight: FontWeight.w700 : 100부터 900 사이에서 두께 설정 가능

아이콘 스타일

아이콘 스타일은 color, size 두가지만 설정할 수 있음

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("APP")),
    body: SizedBox (
      child: Icon(Icons.star, color: Colors.amber, size: 500,)
    )
  )
);

color 는 텍스트 스타일과 같게 설정해주면 되고
size 는 size: 크기 식으로 설정해주면 된다.

버튼

버튼 넣기

TextButton(), IconButton(), ElevatedButton() 중에서 골라서 넣어준다.

TextButton()

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("APP")),
    body: SizedBox (
      child: TextButton( child: Text('버튼'), onPressed: (){},)
    )
  )
);

버튼 태그 아래에는 child 와 onPressed 가 들어가야 하고 onPressed 안에는 버튼을 클릭했을 때 실행될 함수를 만들어주면 된다.

ElevatedButton

위 버튼과 다르게 박스로 표시된 버튼을 만들고 싶다면 ElevatedButton 을 만들어주면 된다.

스타일을 줄 땐 style: ButtonStyle() 안에 스타일 지정해주면 된다.

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("APP")),
    body: SizedBox (
      child: ElevatedButton(
        child: Text('버튼'),
        onPressed: (){},
				style: ButtonStyle()
      )
    )
  )
);

IconButton

아이콘으로 버튼을 만들땐 IconButton() 사용

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text("APP")),
    body: SizedBox (
      child: IconButton(
        icon:Icon(Icons.star),
        onPressed: (){},
      )
    )
  )
);

얘는 하위 태그로 Icon과 onPressed 넣어주면 됨(스타일 지정도 가능)

AppBar 디자인

타이틀에 텍스트 넣기

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('App'),),
    body: SizedBox ()
  )
);

title: Text(’넣을 텍스트’) 식으로 넣으면 된다.

아이콘 넣기

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      leading: Icon(Icons.star),
      actions: [Icon(Icons.star), Icon(Icons.star)],
      title: Text('App'),
    ),
    body: SizedBox ()
  )
);