일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- 이모지메모
- 장자명언
- 공자명언
- Freesound
- jetpack compose
- 코틀린
- Firebase
- Streaming
- 파이썬
- kotlin
- 공부집중
- 벤자민플랭클린
- 명심보감
- 좋은글필사하기
- DART
- 이모지
- 넷플릭스
- FSM
- bash
- Android
- 오픈소스
- recyclerview
- 1인개발자
- Flutter
- Coroutine
- androidx
- ASMR
- 소울칼리버6
- 명언모음
- Linux
Archives
- Today
- Total
Vintage appMaker의 Tech Blog
[Flutter] 특정위젯만 갱신하기 - Statefulbuilder 위젯 본문
Source code or Tip/Flutter & Dart
[Flutter] 특정위젯만 갱신하기 - Statefulbuilder 위젯
VintageappMaker 2022. 11. 30. 16:59Flutter로 개발하다보면 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("+"),
)
],
);
});
}
}
'Source code or Tip > Flutter & Dart' 카테고리의 다른 글
[Flutter] scroll시 AppBar 투명 (0) | 2022.12.23 |
---|---|
[Flutter] Flow 위젯을 이용한 레이아웃 적용 (0) | 2022.12.05 |
[추천 유튜브] Flutter Widget을 빠르게 공부하기 (0) | 2022.11.24 |
[Flutter] firebase cli 설정시 configure 에러 (0) | 2022.11.21 |
[Flutter] 조건부 import (conditional import) (0) | 2022.11.19 |
Comments