[Flutter] 특정위젯만 갱신하기 - Statefulbuilder 위젯

Flutter로 개발하다보면 setState()를 사용하므로써 전체 위젯이 갱신되어 과부하가 생기는 경우가 많다. 이럴 경우, 특정영역의 위젯만 갱신되기를 원하게 되는 데, 상위위젯의 변수와 연동하려면 StatefulBuilder를 사용하는 것이 간편하고 효율적이다.

여기서 참고해야할 것은 

 

1. StatefulBuilder안에서 정의된 위젯만 다시 빌드된다. 

2. StateSetter 함수명을 setState외의 이름으로 한다(감싸고 있는 StatefulWidget과의 구분을 위함)

import 'package:flutter/material.dart';

void main() {
  runApp(StatefulBuilderApp());
}

class StatefulBuilderApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'StatefulBuilder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}

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

  @override
  _MainPageState createState() => new _MainPageState();
}

class _MainPageState extends State<MainPage> {
  TextEditingController ctrlTextParam = TextEditingController();
  int count = 0;

  @override
  Widget build(BuildContext context) {
    print("_MainPageState build");
    return Scaffold(body: buildBody());
  }

  Container buildBody() {
    return Container(
      color: Color(0xffeeeeee),
      width: double.infinity,
      height: double.infinity,
      padding: EdgeInsets.all(18.0),
      child: Container(
        child: Column(
          children: [Text("상위 위젯에서 count : $count"), buildStatefulBuilder()],
        ),
      ),
    );
  }

  Widget buildStatefulBuilder() {
    return StatefulBuilder(
        builder: (BuildContext context, StateSetter setInState) {
      print("buildStatefulBuilder build");
      return Column(
        children: [
          SizedBox(
            height: 10,
          ),
          Text("buildStatefulBuilder에서 count : $count"),
          SizedBox(
            height: 10,
          ),
          ElevatedButton(
            onPressed: () {
              setInState(() {
                count = count + 1;
              });
            },
            child: Text("+"),
          )
        ],
      );
    });
  }
}