Flutter Widget 개념(stateless, stateful)

안드로이드 앱에서는 화면에 표시되는 것을 View 클래스로 정의한다.

화면에 텍스트를 보여주고 이미지를 표시하고 버튼을 클릭하는 등의 모든 표현과 사용자 상호작용은 View를 통해 일어난다.

 

플러터에서는 모든 화면 표시와 사용자 상호작용은 위젯을 사용한다.

화면에 위젯을 배치하고 위젯이 정보를 표시하고 사용자의 입력을 받거나 네트워크에서 받아온 결과를 출력한다.

 

플러터의 위젯은 크게 Stateless Widget 과 Stateful Widget 으로 구별한다.

Stateless Widget은 표면 표시용 위젯이다. 위젯이 로딩되어 화면에 표시된 이후에는 사용자 이벤트나 동작이 있어도 내용을 변경할 수 없다.

Stateful Widget은 변경 가능한 상태(State)를 가진다.

Stateful Widget 은 UI가 동적으로 변경될 수 있는 경우에 유용하다.

 

StatelessWidget은 상태가 변경될 때 플러터 코어 프레임워크에 의해 자동으로 다시 랜더링도지 않는다.

StatefulWidget의 상태가 변하면 변경되는 원인에 관계없이 특정 생명주기 이벤트가 발생한다. 생명주기 이벤트 함수 호출은 트리거한 결과 위젯이 차지하는 화면의 일부를 다시 랜더링한다.

import 'package:flutter/material.dart';
 
class LView extends StatefulWidget {
  const LView({Key? key, required this.title}) : super(key: key);
 
  final String title; // 부모 위젯으로부터 전달받은 변수
  // final 지시어는 어떤 변수를 참조하는 값이 한번 설정되면
  // 다른 값으로 변경될 수 없다는 의미이다.
 
  @override
  State<LView> createState() => _LViewState();
}
 
class _LViewState extends State<LView> {
  // 상태를 변경하므로 변경가능한 것들은 선언할 수 있다.
 
  int _counter = 0; // _ 를 붙이면 private 변수
  // var : 변수 할당시 타입이 지정된다. dart 컴퍼일러에서 타입을 추론한다.
  // dynamic : 타입을 특정하지 않는다.
  List<String> name = ['주영훈', '홍길동', '이순신'];
  var like = [0, 0, 0];
 
  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }
 
  // widget으로 StatefulWidget에 선언한 프로퍼티들에 접근이 가능
 
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView.builder(
        itemCount: name.length,
        itemBuilder: (c, i){
          return ListTile(
            leading: Text(like[i].toString()),
            title: Text(name[i]),
            trailing: ElevatedButton(
              child: Text('좋아요'),
              onPressed: (){
                setState(() {
                  like[i]++;
                });
              },
            ),
          );
        }),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Text(_counter.toString()),
        // child: const Icon(Icons.add),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}

 

플러터 UI는 코드에서 만들어진다.