[Flutter] StatelessWidget, StatefulWidget

1. Widget

• UI를 묘사하는 다트의 클래스
• 화면에 나타날 요소를 결정하는 데이터와 설정

 

대표적인 위젯

• 레이아웃 : Scaffold, Stack, Row, Column
• 구조 : Button, Toast, MenuDrawer
• 스타일 : TextStyle, Color
• 애니메이션 : FadeInPhoto, Transform
• 위치와 정렬 : Center, Padding

 

 

2. StatelessWidget

특징

• 상태가 없기 때문에 상태를 관리할 필요가 없음
• 위젯을 언제 트리에서 제거해야 할지, 언제 리빌드해야할지가 외부로부터 결정됨

 

기본형태

class Example extends StatelessWidget {
    const Example({Key? key}) : super(key: key);
    
    @override
    Widget build(BuildContext context) {
    	return Container(...);
    }
}

 

constructor(생성자)

: 기본생성자, class명과 동일한 이름을 가짐

 

super(key: key)

: 부모인 StatelessWidget의 기본생성자 호출

: 파라미터가 없다면 생략 가능

 

build

: Widget을 리턴하는 함수

: 필수 메소드

 

 

3. StatefulWidget

특징

• State 객체를 갖는 위젯
• State 객체의 setState 메소드가 위젯의 상태 변화를 알려줌
• 클라이언트의 조작으로 setState가 호출되면 플러터가 위젯을 다시 그림

 

기본 형태

class Example extends StatefulWidget {
  const Example({ Key? key }) : super(key: key);

  @override
  _ExampleState createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  @override
  Widget build(BuildContext context) {
    return Container(...);
  }
}

 

언더바(_)

: private의 의미

 

setState

: 플러터에게 state 값이 변경되었다고 알려서 build 메소드를 다시 호출하도록 하는 메소드

: 비동기 코드를 실행할 수 없기 때문에 setState 실행 전 모든 비동기 코드를 완료해야 함

 

 

+ 플러터 초기 앱

class MyHomePage extends StatefulWidget {
    MyHomePage({Key? key, required this.title}) : super(key: key);

   final String title;

   @override
   _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

 

initState

: 플러터가 화면에 위젯을 그리기 전에 필요한 모든 초기화를 수행하는 메소드

 

 

 

 

 

참고 : https://velog.io/@dosilv/Flutter-StatelessWidget-StatefulWidget

[Flutter] StatelessWidget, StatefulWidget 📱