Flutter 공부 ( 1 )
stless라고 치면 기본 세팅구조가 나옴
위젯 기본 4가지
Icon, Image, Text, Container(SizedBox)
home : Image.asset('경로')
pibspec.yaml : 앱 만들때 필요한 모든 자료들
MaterialApp ??
자신만의 커스터마이징으로 할 수 있는 것??
Scaffold?? : 스마트폰 화면을 상중하로 나눌 수 있게 도와주는 위젯
상단 : appBar
중단 : body
하단 :
body에서 child를 하나가 아닌 여러개를 사용하고 싶을 때 Row 위젯을 사용한다
Row의 하위 속성으로는 children이 있어서 []를 사용해서 내용을 집어넣으면 가로로 배치할 수 있다.
return MaterialApp(
home: Scaffold(
body: Row(
children:[
Icon(Icons.star),
Icon(Icons.star),
Icon(Icons.star)
]
)반대로 세로로 배치하고 싶으면 Column를 사용하면 된다.
여기서 Row와 Column은 크기 조절을 못한다.
그렇기에 우리는 Row를 Container로 감싸서 사용하면 크기 조절을 할 수 있다. ( SizedBox로도 사용할 수 있음, Container는 코드가 좀 무거움, 그래서 width, height, child만 사용할 경우에는 Container보다 SizedBox()를 사용하는 것을 추천함 )
bottomNavigationBar: BottomAppBar(
child: Container(
height: 70,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Icon(Icons.phone),
Icon(Icons.message),
Icon(Icons.contact_page)
],
),
),
),
mainAxisAlignment : 정렬 기능 ( display:flex와 비슷하다고 봄 )
crossAxisAlignment : 역정렬 기능
Container : 마진과 패딩 주는법
margin, padding : EdgeInsets.all or fromLTRB
margin : EdgeInsets.all(20) : 전부다 마진 20
margin : EdgeInsets.fromLTRB(left, top, right, bottom)
Container : border 주는법 ( decoration: BoxDecoration ) 주의 decoration을 쓸 경우 Cotainer안에 decoration말고 color 속성이 들어가면 오류가 뜬다. color 속성은 decoration안에 주도록 하자.
박스를 정가운데로 배치고 싶을 경우 Container를 Center로 감싸면 된다. 센터 감싸는 방법은 마우스를 올리고 전구 표시가 뜨면 Center로 맞춰주면 자동으로 해줌
return MaterialApp(
home: Scaffold(
appBar: AppBar( title: Text("App Designer")),
body: Center(
child: Container(
width: 100, height: 100,
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
decoration: BoxDecoration(
border: Border.all(color:Colors.black),
),
),
),
)
);
정가운데가 아닌 맨 아래 맨 위로 왼쪽 오른쪽으로 두고 싶으면 Center를 지우고 Align를 사용해서 정렬할 수 있다.
return MaterialApp(
home: Scaffold(
appBar: AppBar( title: Text("App Designer")),
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
width: double.infinity, height: 100,
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
decoration: BoxDecoration(
border: Border.all(color:Colors.black),
),
),
),
)
);
글자 스타일 주는 법
아래와 같이 Text 안에 style : TextStyle( ) 을 지정해줘야지 스타일을 바꿔줄 수 있다.
색 주는 법
1. Colors.칼라명
2. Color(Oxff####) #에 해당하는 칼라값을 넣어주면됨.
3. Color.fromRGBO(r, g, b, opacity)
return MaterialApp(
home: Scaffold(
appBar: AppBar( title: Text("hello world")),
body: SizedBox(
child: Text('안녕하세요',
style: TextStyle( color: Colors.red),
),
)
)
);
버튼 주는 법
TextButton()
IconButton()
ElevatedButton()
return MaterialApp(
home: Scaffold(
appBar: AppBar( title: Text("hello world")),
body: SizedBox(
child: IconButton(
icon: Icon(Icons.star),
onPressed: (){},
)
)
)
);
appBar 파라미터 종류
title : 왼쪽제목
leading : 왼쪽에 넣을 아이콘
actions: [우측아이콘들]
return MaterialApp(
home: Scaffold(
appBar: AppBar(
actions : [Icon(Icons.star), Icon(Icons.star)],
leading: Icon(Icons.star),
title: Text('Good'),
),
body: SizedBox(
child: IconButton(
icon: Icon(Icons.star),
onPressed: (){},
)
)
)
);
레이아웃 혼자서도 잘 짜는 법
1. 예시 디자인 준비
2. 예시화면에 네모 그리기
3. 바깥 네모부터 하나하나 위젯으로 ( 제일 큰 틀인 container로부터 시작해서 row로 나눌건지 column으로 나눌건지, Row 안에는 어떤 내용이, coulmn에는 어떤 내용들이 있는지 등등.. )
4. 마무리 디자인
Flexible ( 컨테이너 박스를 비율에 맞게 맞춰주는 위젯 )
Expanded : flex : 1 가진 Flexible 박스랑 똑같음
위와 같이 박스폭을 %로 주고 싶으면 Flexible를 사용한다.
박스 하나 넓게 채우려면 Expanded를 사용하면 된다.
ListView ()
1. 스크롤바 생김
2. 스크롤 위치 감시 가능
3. 메모리 절약기능
softWrap : true
항목은 텍스트가 해당 영역을 넘어갈 경우 줄바꿈을 할지 여부를 설정할 수 있다.