Flutter 기본 위젯 4가지 & 레이아웃 & stateful 위젯 vs. stateless 위젯

위젯들

1. 글자 위젯

Text(''")

2. 이미지 위젯

Image.asset('경로~~')

 

return MaterialApp(

  home: Image.asset('assets/dog.png')

);

3. 아이콘 위젯

Icon

4. 박스 위젯

return MaterialApp(

home: Container( width: 50, height: 50, color: Colors.blue )

);

 

return MaterialApp(

home: Center( 

child: Container( width: 50, height: 50, color: Colors.blue )

);

 

Center() : 내 자식 위젯의 기준점을 중앙으로 설정해주는 것

 

5. 버튼 셋 중 하나 쓰면 된다. 

TextButton()

IconButton()

ElevatedButton() : 공중에 뜬 버튼 모양

 

버튼엔 child: onPressed넣어야 잘 보인다. 

레이아웃

//상중하로 나눠주는 Scaffold()위젯

 

return MaterialApp(

  home: Scaffold(

   appBar: AppBar(), // 상단

   body: Container(), // 바디부분

   bottomNavigationBar: BottomAppBar(), //하단

 )

);

 

width, height, child만 필요한 박스는 SizedBox() 그 외는 Container사용

 

Text 조절하는 방법, style넣기 

Text('안녕하세요', style: TextStyle( color: Color(oxffaaaaaa), fontSize, background,FontWeight..),

 

AppBar

appBar: AppBar( leading: Icon(Icons.star), title: Text('ddd'))

-> 이렇게 하면 맨 좌측 상단에 있는 것 만들 수 있다.(옆에 펼쳐졌다가 줄어들었다가 하는 것)

 

Flexible vs. Expanded

박스폭을 %로 주고 싶으면 Flexible

3:7로 쪼개기

Flexible(child: Container(color: Colors.blue), flex: 3),

Flexible(child: Container(color: Colors.green), flex: 7),

 

박스 하나 넓게 채우려면  Expanded

expanded -> flex: 1가진 Flexible 박스랑 똑같음

 

** 레이아웃 잘 짜는법

1. 예시 디자인 준비 (다른 앱 베껴)

2. 모든 영역 네모로 나누기( 빈공간 없게 네모로 그리기)

3. 겉 박스부터 위젯을 이용해서 차례로 만들어 나가면 된다. ( 박스를 가로로 배치할 경우 Row쓰고, 세로로 배치할 경우 Column쓰면 된다.)

4. 마지막으로 디자인 넣기 (margin, padding, 정렬 글자 색 등)

 

커스텀 위젯

line1. 커스텀 위젯은 class로 만든다. 

   return MaterialApp(
      home: Scaffold(
          appBar: AppBar(),
          body: ShopItem(),
        //ListView 안에 넣으면 스크롤바 생김, 스크롤 위치 감시도 가능, 메모리 절약기능도 가능
      ),
    );
  }
}
class ShopItem extends StatelessWidget {
  const ShopItem({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: Text('안녕'),
    );
  }
}

 

ListView() 안에 넣으면 

- 스크롤바 생김

- 스크롤 위치 감시도 가능

- 메모리 절약기능도 존재

 

https://www.youtube.com/watch?v=mLQ-ehf3d6Y 

Stateful Widget vs. Stateless Widget

Stateless Widget : 화면이 로드될 때 한 번만 그려지는 State가 없는 위젯으로 변경이 필요한 Data가 없는 것을 의미하며

이벤트 또는 사용자 상호 작용에 의해 동작하지 않는다.

Stateful Widget : 위젯이 동작하는 동안 Data 변경이 필요한 경우 화면을 다시 그려서 변경된 부분을 위젯에 반영하는 동적인 위젯으로 이벤트 또는 사용자 상호 작용에 의해 동작한다.

 

https://itwise.tistory.com/29

플러터 - Stateless Widget과 Stateful Widget 차이점

https://www.youtube.com/watch?v=oA2PngShjm8&list=PLxTmPHxRH3VUueVvEnrP8qxHAP5x9XAPv&index=12 

 

Child vs. Children

child takes a single widget

child: Text('foo')

children takes a list of widgets

children: <Widget>[Text('foo'), Text('bar')]