[Flutter] 위젯 정리

앱 스타일 위젯

• MaterialApp(): 구글 기본앱 느낌, 커스텀도 이걸로하고 후에 구글물 짜기
• Curpentino(): 앱스토어 느낌

기본 위젯

• Icon(Icons.-)
• Image.asset('path')
• Text('', style: TextStyle(..))
• CircleAvatar(radius: 30,
  backgroundImage: AssetImage('assets/이미지.확장자')
• TextButton(child: Text('버튼'), onPressed: (){} )
• ElevatedButton(child: Text('버튼'), onPressed: (){} )
• IconButton(icon: Icon(), onPressed: (){} )
• floatingActionButton:
  FloatingActionButton(child: Text('버튼'), onPressed: (){})
  

TextField()

글자 입력란

아이콘 넣기

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.star), // prefixIcon, suffixIcon..
  ),
),

테두리, 색 채우기

TextField(
  decoration: InputDecoration(
    icon: Icon(Icons.abc),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.lightBlue, width: 2.0),
      borderRadius: BorderRadius.circular(30),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
      borderRadius: BorderRadius.circular(30),
    ),
    border: OutlineInputBorder(),
    
    filled: true,
    fillColor: Colors.blue.shade50,
  ),
),

placeholder ?

TextField(
  decoration: InputDecoration(
    hintText: 'hintText',
    helperText: 'helperText',
    labelText: 'labelText',
    counterText: 'counterText'
  ),
),

커스텀 위젯

재사용 잦은 UI나 큰 페이지 단위로 커스텀 위젯화

MaterialApp(
  home: Scaffold(
    appBar: AppBar(),
    body: SizedBox( child: Custom() ),
  )
);

class Custom extends StatelessWidget {
  const Custom({super.key});

  @override
  Widget build(BuildContext context) {
    return 따로 뺄 위젯()
  }
}

레이아웃 위젯

• Row(mainAxisAlignment: .., children: [])
• Column(mainAxisAlignment: .., children: [])
• ListView(children: [])
  SNS 피드 등 긴 목록이 필요할 때 사용
  무한 스크롤, 메모리 절약 등 유용함
• Scaffold(
  appBar: AppBar(title: ..),
  body: ..,
  bottomNavigationBar: BottomAppBar(..))
• AppBar(
  title : Text('제목'),
  leading : Icon(Icons.앱바 최좌측 아이콘),
  actions : [ Icon(Icons.앱바 최우측 아이콘들), Icon(Icons.-) ])

ListTile()

좌측 그림 + 우측 Text 레이아웃

ListTile(
	leading: Image.asset('assets/coolgam.png'),
	title: Text('멋감'),
)

ListView.builder()

목록 동적 생성

ListView.builder(
	itemCount: list.length(),
	itemBuilder: (context, i) {
		return ListTile(
			leading: Image.asset('assets/coolgam.png'),
			title: Text(list[i]),
		)
	}
)

Flexible()

여러 박스 배치 시 너비/높이를 고정값 말고 비율로 주고 싶을 때

Row(
	children: [
		Flexible(flex: 1, child: Container(color: Colors.amber)),
		Flexible(flex: 2, child: Container(color: Colors.blue)),
	]
)

→ 각 1 : 2만큼 차지

Expanded()

여러 박스 배치 시 하나의 박스만 남은 가로폭 꽉 차게 만들기

Row(
	children: [
		Expanded(flex: 1, child: Container(color: Colors.amber)),
		Container(width: 50, child: Container(color: Colors.blue)),
	]
)

박스 위젯

• SizedBox(): width, height만 필요한 박스면 이게 가벼우니 이거 쓰기
• Container(width: 10, height: 10, color: Colors.amber)
  color를 줘야 눈에 보임
  width, height가 안먹는 이유: 위치를 안잡아줘서
  Center(child: Container(..)) 등
• Container(width: double.infinity): 박스폭 가로로 꽉차게
• Container(margin: ..): 바깥 여백
  근데 이제 EdgeInsets.all(10)이나 .fromLTRB(10, 20, 30, 40)` 같이 드럽게 줘야함
• Container(padding: ..): 안쪽 여백
  Row, Column 말고 Container에만 여백 줄 수 있음
  Row에 여백 주려면 Container로(를) 감싸기
  padding을 위한 Padding() 위젯도 존재
• Container(decoration: BoxDecoration(..))
  color, boxShadow, borderRadius 등 중요치 않은 박스 스타일 지정
• (복습) Center(child: Container(..)): 중앙정렬
• Align(alignment: Alignment..., child: Container(..))
  Alignment 뒤에 bottomLeft 등 넣어 박스 정렬