Flutter Study (2)

Flutter Widget

StatelessWidget과 StatefulWidget

• StatelessWidget : 상태 변화가 없어 화면을 새로고침 할 필요가 없는 위젯
  - 화면 내 내용이 변하지 않는 위젯

  class MyApp extends StatelessWidget {
  	MyApp();
      
      @override
      Widget build(BuildContext context) {
      	return Text("hello");
      }
  }   

  • extends StatelessWidget : StatelessWidget의 기능을 물려받음
  • 생성자 : 클래스 이름과 동일한 함수
  • build 함수 : 화면에 보여줄 자식 위젯을 반환

• StatefulWidget : 상태 변화가 있어 화면을 새로고침 할 필요가 있는 위젯

  class MyApp extends StatefulWidget {
  	MyApp();
    
    @override
    State<MyApp> createState() => _MyAppState();
  }
  
  class _MyAppState extends State<MyApp> {
  	@override
    Widget build(BuildContext context) {
    	return Text("hello");
    }
  }

  • MyApp : StatefulWidget의 기능을 물려받은 클래스
  • _MyAppState : MyApp 상태를 가진 클래스 (실질적인 내용이 들어가는 곳)

화면 이동

• navigator : Flutter에서는 각 화면을 라우트(Route)라고 부르며, 화면을 이동할 때 네비게이터(Navigator)를 사용한다.

  Navigator.push(
  	context,
    MaterialPageRoute(builder: (context) => SecondPage()),
  );

• 현재 화면 종료

  Navigator.pop(context);

화면 만들기

AppBar

• AppBar 영역 명칭
  
• overflow가 난다면 leadingWidth 사용
• elevation : AppBar가 띄워진 정도를 조절

Body - Row, Column 사용해서 영역 나누기

• 레이아웃 나누기
  • Row, Column을 사용하여 작은 영역부터 나눠서 구현 후 반복
    
  • Refactor 단축키 : Ctrl + Shift + R
• Stack : 요소들을 겹치게 표현하기 위해 사용하는 위젯
• Image(fit: BoxFit.cover) : 이미지의 비율을 유지하면서 고정된 폭과 높이에 맞춰 이미지를 적절히 잘라서 보여줌
• 텍스트 배치 시 overflow가 발생할 때
  • Column이 폭을 얼마나 차지하는지 알 수 없기 때문에 발생
  • 해결 방법 : Column 위젯을 Expanded로 감싸줌
  • Expanded : child 위젯이 차지할 수 있는 공간을 최대한 차지하도록 크기를 지정해주는 위젯

Body - 요소 정렬하기

• Row와 Column은 주축, 부축을 기준으로 정렬할 수 있다.
  • 주축 : Main Axis
  • 부축 : Cross Axis
    
• MainAxisAlignment, CrossAxisAlignment를 설정하여 요소들을 정렬

  Column(
  	crossAxisAlignment: CrossAxisAlignment.start,
  	...
  )

Body - 다양한 Widget들

• Spacer : 빈 공간을 최대한 차지하는 위젯
  
• GestureDetector : 위젯을 버튼처럼 사용할 수 있도록 해주는 역할

  GestureDetector(
  	onTap: () {},	// 클릭 시 실행할 동작 선언
  	child: Row(
  		...
  	)
  )

• FloatingActionButton

  floatingActionButton: FloatingActionButton(
  	onPressed: () {},
  	backgroundColor: ...,
  	elevation: ...,
  	child: Icon(
  		...
  	),
  ),

• BottomNavigationBar

  bottomNavigationBar: BottomNavigationBar(
  	fixedColor: ...,
  	unselectedItemColor: ...,
  	showUnselectedLabels: true,
  	selectedFontSize: ...,
  	unselectedFontSize: ...,
  	iconSize: ...,
  	type: BottomNavigationBarType.fixed,
  	items: [
  		BottomNavigationBarItem(
  			icon: ...,
  			label: ...,
  			backgroundColor: ...
  		),
  		...
  	],
  	currentIndex: 0	// 현재 index
  )