[Flutter, 플러터 걸음마] 앱바(AppBar), 버튼, 레이아웃 꾸미기
1. 텍스트 스타일
1) 컬러
*Text ( ) 위젯에 ‘텍스트’ 적고 , style: 파라미터에 TextStyle( ) 위젯 넣고 그 안에 color: Colors.@@
Text('ddddd', style: TextStyle( color: ))
-Colors.컬러명
-Color(0xffaaaaaa) 헥스컬러코드
코드 왼쪽에 피커가 생김 누르면 컬러 선택 위젯이 나옴
2)폰트 사이즈
Text('ddddd', style: TextStyle(fontsize: 00))
3)자간
Text('ddddd', style: TextStyle(letterspacing : 00))
4)글자두께
Text('ddddd', style: TextStyle(fontweight : Fontweight.w100))
등등 TextStyle에 엄청 많다
2.버튼 스타일
1)버튼은 크게 세가지가 있다.
-TextButton() 단순 텍스트 버튼
*TextButton( child: Text('@@'), onPressed: () {})
-IconButton() 아이콘으로 된 버튼
*IconButton( Icon:(Icons.@@), onPressed: () {})
-ElevatedButton() 툭튀어나온 버튼
*ElevatedButton( child: Icon:(Icons.@@), onPressed: () {})
2)버튼에는 두개의 파라미터가 '꼭' 필요하다.
-child:
-onPressed: () {} 소괄호, 중괄호가 들어간다. 함수 들어가야 함. (나중에 배움)
예시) TextButton( child: , onPressed: () {}, )
-child: 에 버튼 안에 들어갈 것들 넣음
child: Text('버튼 안에 들어갈 글자‘)
3)스타일 넣기
TextButton( child: Text('텍스트‘), ononpressed: () {}, style: ButtonStyle(@@@ ) )
ButtonStyle도 다양함.
4)IconButton() 의 경우, 텍스트 말고 아이콘으로
child: Icon(Icons.@@), onpressed: () {}
3.앱 상단 바 AppBar 스타일
1)leading: 앱바 왼쪽에 아이콘 등 넣을때
-appbar: AppBar(leading: Icon(Icons.@@@), )
2)title: 은 앱바 왼쪽에 제목 붙일 때
-appbar: AppBar(leading: Icon(Icons.@@@), title: Text('@@@'))
이렇게 하면 아이콘 바로 우측에 텍스트 들어감
3)actions: [] 은 앱바 우측에 아이콘 등 넣을 때
appbar: AppBar( actions: [ Icon(Icons.@@) ], )
4.숙제: 당근마켓 화면 하나 똑같이 만들기
5.막막했는데 팁을 주셨다.
레이아웃 잘 짜는 법
1)예시 디자인 준비
2)각 영역을 다 박스로 구분하기
3)바깥 박스부터 하나하나 위젯으로 짜기
큰박스는 Container
가로배열된 박스는 Row
세로배열된 박스는 Column
4)마무리로 세부 디자인 margin, padding 등
6.숙제 중간점검
1)현재까지 구현 화면
2)위 화면 소스코드
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Row(children: [Text('금호동3가'), IconButton(onPressed: () {}, icon: Icon(Icons.arrow_drop_down_outlined)
)
]
),
actions: [Row(children: [IconButton(onPressed: () {}, icon: Icon(Icons.search)), IconButton(onPressed: () {}, icon: Icon(Icons.menu)), IconButton(onPressed: () {}, icon: Icon(Icons.notifications)
)
],
),
],
),
body: Container(color: Colors.amber, height: 150, width: 600, child: Row(children: [
SizedBox(width: 200, height: 150, child: Image.asset('moong.jpg'),),
Column(crossAxisAlignment: CrossAxisAlignment.start,mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [
SizedBox(width: 200,
child: Flexible(
child: RichText(
overflow: TextOverflow.ellipsis, maxLines: 2, strutStyle: StrutStyle(fontSize: 20.0, fontWeight: FontWeight.w700),
text: TextSpan(text: '캐논 DSLR 100D (단렌즈, 충전기 16기가SD 포함)',style: TextStyle(color: Colors.black, height: 2, fontSize: 18.0),
)
)
),
),
Text('성동구 행당동 · 끌올 10분 전',style: TextStyle(color: Colors.grey,fontWeight: FontWeight.w200,fontSize: 13)
),
Text('210,000원',style: TextStyle(color: Colors.black,fontWeight: FontWeight.w900, fontSize: 13)
),
SizedBox(
child: Row(children: [IconButton(onPressed: () {}, icon: Icon(Icons.heart_broken_rounded)), TextButton(onPressed: () {}, child: Text('4')),
]
),
)
],
)
],
),
),
bottomNavigationBar: BottomAppBar(height: 100)
)
);진짜 지저분하다.. ㅋㅋㅋ
-의문점1
왜, 우측 로우, 4번째 컬럼에서 아이콘 버튼 2개가 Main Axis 에서 end 정렬되지 않는지 모르겠다.
->Row 자체에 width가 충분히 잡혀있지 않았음. 텍스트, 아이콘은 소심해서 따로 width 지정안하면 딱 자기 크기만큼만 박스로 인정함. 그러니 가로 정렬, 세로정렬해도 안움직이지. 전체의 크기를 정해주자.
-의문점2
왜 하트 아이콘은 없음? heart 검색하면 broken heart만 나옴.
->하트는 favorite 이었음...
-의문점3
사진 크롭 어케하는지 궁금하다.
-의문점4
텍스트 자동 줄바꿈 방법을 구글링해서 적용했더니 적용은 되는데 콘솔창에 자꾸 아래와 같은 장문의 글이 뜬다.
======== Exception caught by widgets library =======================================================
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.
The ParentDataWidget Flexible(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.
Usually, this means that the Flexible widget has the wrong ancestor RenderObjectWidget. Typically, Flexible widgets are placed directly inside Flex widgets.
The offending Flexible is currently placed inside a SizedBox widget.
The ownership chain for the RenderObject that received the incompatible parent data was:
RichText ← Flexible ← SizedBox ← Column ← Row ← ColoredBox ← ConstrainedBox ← Container ← KeyedSubtree-[GlobalKey#44c1f] ← _BodyBuilder ← ⋯
When the exception was thrown, this was the stack:
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49 throw_
packages/flutter/src/widgets/framework.dart 6119:11 <fn>
다시해보자..
7.센세와 함께 해봤다.
하나하나 따라해보니.. 너무 쉬웠다.. 난 뭘했던거지..
배운 것은
1. '줄바꿈' 을 잘해줘야한다!
줄바꿈 안해서 안나오는 위젯, 파라미터도 있더라..
한줄 쓰면 바로 줄바꾸자. 그래야 보기도 더 쉽다.
2.큰 것 부터 하나하나 만들고 세부를 만들자.
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Row(
children: [
Text('탄현동'),
IconButton(onPressed: () {}, icon: Icon(Icons.arrow_drop_down))
],
),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.search)),
IconButton(onPressed: () {}, icon: Icon(Icons.menu)),
IconButton(onPressed: () {}, icon: Icon(Icons.notifications))
],
),
body: Container(
height: 250,
padding: EdgeInsets.all(15),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset('moong.jpg', height: 150,),
Container(
width: 230,
padding: EdgeInsets.all(10),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('캐논 DSLR 100D (단렌즈, 충전기 6기가SD 포함)', style: TextStyle(fontSize: 18, fontWeight: FontWeight.w700)),
Text('일산 서구 탄현동 · 끌올 10분 전 ', style: TextStyle(fontSize: 12, fontWeight: FontWeight.w200)),
Text('210,000원', style: TextStyle(fontSize: 12, fontWeight: FontWeight.w700)),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.favorite)),
Text('4')
],)
],
)
),
],
),
)
)
);
8. 연습 (당근마켓 동네생활 페이지)
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Row(
children: [
Text('탄현동'),
IconButton(onPressed: () {}, icon: Icon(Icons.arrow_drop_down), color: Colors.white,)
],
),
actions: [
IconButton(onPressed: () {}, icon: Icon(Icons.search), color: Colors.white,),
IconButton(onPressed: () {}, icon: Icon(Icons.person), color: Colors.white,),
IconButton(onPressed: () {}, icon: Icon(Icons.notifications), color: Colors.white,)
],
),
body: Container(color: Colors.black, width: 500,
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(onPressed: () {}, child: Text('주제')),
TextButton(onPressed: () {}, child: Text('인기글')),
TextButton(onPressed: () {}, child: Text('같이해요')),
TextButton(onPressed: () {}, child: Text('동네맛집')),
TextButton(onPressed: () {}, child: Text('동네정보')),
],
),
Container(width: 500,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('주방 싱크대 교체 견적 가능하신분~~', style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700, color: Colors.white)),
Text('야당동 · 6분전', style: TextStyle(fontSize: 15,fontWeight: FontWeight.w300, color: Colors.grey)),
IconButton(onPressed: () {}, icon: Icon(Icons.comment), color: Colors.white,)
],
),
Image.asset('moong.jpg', width: 100, height: 100,)
],
),
),
Container(width: 500,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('주방 싱크대 교체 견적 가능하신분~~', style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700, color: Colors.white)),
Text('야당동 · 6분전', style: TextStyle(fontSize: 15,fontWeight: FontWeight.w300, color: Colors.grey))
],
),
Image.asset('moong.jpg', width: 100, height: 100,)
],
),
),
Container(width: 500,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('주방 싱크대 교체 견적 가능하신분~~', style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700, color: Colors.white)),
Text('야당동 · 6분전', style: TextStyle(fontSize: 15,fontWeight: FontWeight.w300, color: Colors.grey))
],
),
Image.asset('moong.jpg', width: 100, height: 100,)
],
),
),
Container(width: 500,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('주방 싱크대 교체 견적 가능하신분~~', style: TextStyle(fontSize: 20,fontWeight: FontWeight.w700, color: Colors.white)),
Text('야당동 · 6분전', style: TextStyle(fontSize: 15,fontWeight: FontWeight.w300, color: Colors.grey))
],
),
Image.asset('moong.jpg', width: 100, height: 100,)
],
),
),
],
),
),
bottomNavigationBar: BottomAppBar(color: Colors.blueGrey,
child: Row(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
IconButton(onPressed: () {}, icon: Icon(Icons.home), color: Colors.white,),
IconButton(onPressed: () {}, icon: Icon(Icons.newspaper), color: Colors.white,),
IconButton(onPressed: () {}, icon: Icon(Icons.camera), color: Colors.white,),
IconButton(onPressed: () {}, icon: Icon(Icons.mark_unread_chat_alt_rounded), color: Colors.white,),
IconButton(onPressed: () {}, icon: Icon(Icons.person), color: Colors.white,)
],
),
)
));
}
}
