❮
[Flutter] 5. Flutter StatefulWidget & Dart 101(함수, 변수)
[Flutter] 5. Flutter StatefulWidget & Dart 101(함수, 변수)
| no | 이전 시리즈 |
|---|---|
| 1 | Flutter 개발 환경 준비 |
| 2 | Hello, Flutter |
| 3 | Flutter UI - Hot Reload, Basic widgets |
| 4 | Flutter UI - 폰트 추가, 위젯 |
StatefulWidget
StatefulWidget은 변할 수 있는 상태(State)를 갖는 위젯입니다.State는 위젯이 만들어질 때 동기적으로 읽어지고, 위젯의 수명 동안에 바뀔 수 있는 정보를 말합니다. State가 바뀌면 State.setState() 를 사용해서 State의 변화를 알려야합니다.
동적인 UI를 만들 때 유용합니다.
stless 로 StatelessWidget 를 만들듯이 stful로 쉽게 StatefulWidget 템플릿을 만들 수 있습니다.
StatefulWidget 인스턴스 그 자체는 immutable 합니다. 하지만 createState() 함수를 이용해서 만들어지는 State 객체가 변화할 수 있습니다.
그러니 변하지 않는 코드는 Widget 안에 선언하고, 동적으로 변하는 코드를 State 내부에 선언해야 합니다.
StatefulWidget이 인플레이트 될 때마다 프레임워크는 createState() 를 호출합니다.
퍼포먼스 이슈나 기타 세부사항은 지금은 다루지 않습니다.
Dart variable
Dart는 javascript와는 달리 정적 타이핑 언어이기 때문에 일반적으로 변수의 타입을 따집니다.동적 타이핑 언어에서 썼던 것 처럼 변수를 사용하려면 dynamic 으로 변수형을 지정하면 됩니다. 이렇게 하면 런타임에 타입이 결정됩니다.
Dart function
그냥 평범한 C 스타일 함수 선언을 합니다. build() 함수를 보면 됩니다.parameter가 2개 이상일 때는 {}로 감싸줘야 합니다.
int add({int n1, int n2}){ return n1 + n2; }
간단한 샘플 코드
화면을 누를 때마다 0<= <100 사이의 수를 랜덤하게 생성하는 StatefulWidget 입니다.import 'package:flutter/material.dart';
import 'dart:math';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SafeArea(
child: Center(
child: Scaffold(
appBar: AppBar(
title: Text('0<= <100'),
),
body: MyStateful(),
),
),
),
);
}
}
class MyStateful extends StatefulWidget {
@override
_MyStatefulState createState() => _MyStatefulState();
/* immutable 코드 */
}
class _MyStatefulState extends State<MyStateful> {
int number = 0;
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
child: FlatButton(
onPressed: () {
setState(() {
// [0, 99]
number = Random().nextInt(100);
});
},
child: Text(
'$number',
style: TextStyle(fontSize: 100.0),
),
),
);
}
}.
piano (press key Q)
Categories
flutter
(
82
)
dart
(
34
)
android
(
32
)
kotlin
(
11
)
plugin
(
8
)
provider
(
8
)
vim
(
7
)
bloc
(
6
)
iOS
(
6
)
state management
(
6
)
플러터
(
6
)
PS
(
5
)
algorithm
(
5
)
architecture
(
5
)
async
(
5
)
getx
(
5
)
java
(
5
)
API
(
4
)
BOJ
(
4
)
class
(
4
)
daily
(
4
)
git
(
4
)
golang
(
4
)
memo
(
4
)
riverpod
(
4
)
state
(
4
)
stream
(
4
)
test
(
4
)
web
(
4
)
widget
(
4
)
windows
(
4
)
HTTP
(
3
)
androidX
(
3
)
app state
(
3
)
context
(
3
)
crash
(
3
)
db
(
3
)
editor
(
3
)
error
(
3
)
extension
(
3
)
github
(
3
)
hive
(
3
)
ide
(
3
)
package
(
3
)
pubspec
(
3
)
python
(
3
)
syntax
(
3
)
vscode
(
3
)
app icon
(
2
)
await
(
2
)
chocolatey
(
2
)
consumer
(
2
)
cp949
(
2
)
deployment
(
2
)
dev
(
2
)
flavor
(
2
)
gesture
(
2
)
globalkey
(
2
)
go
(
2
)
google
(
2
)
hack
(
2
)
js
(
2
)
json
(
2
)
key
(
2
)
keystore
(
2
)
list
(
2
)
listview
(
2
)
lock
(
2
)
mac
(
2
)
map
(
2
)
navigation
(
2
)
nosql
(
2
)
project
(
2
)
pub
(
2
)
recyclerview
(
2
)
rxdart
(
2
)
sdk
(
2
)
selector
(
2
)
setting
(
2
)
size
(
2
)
soc
(
2
)
synchronized
(
2
)
tdd
(
2
)
tip
(
2
)
version
(
2
)
viewmodel
(
2
)
vundle
(
2
)
webview
(
2
)
xcode
(
2
)
yaml
(
2
)
책
(
2
)
플러터 단점
(
2
)
16.0
(
1
)
2.0
(
1
)
2023
(
1
)
AATP2
(
1
)
ChangeNotifierProvider
(
1
)
Example
(
1
)
Guava
(
1
)
ImageReader
(
1
)
Mo's algorithm
(
1
)
OAuth2
(
1
)
OpenGL
(
1
)
Oreo
(
1
)
ProgressBar
(
1
)
REST API
(
1
)
Trie
(
1
)
activity
(
1
)
adaptive
(
1
)
android P
(
1
)
android context
(
1
)
android11
(
1
)
apktool2
(
1
)
app exit
(
1
)
append
(
1
)
appicon
(
1
)
arkit
(
1
)
array
(
1
)
asciidoc
(
1
)
async *
(
1
)
async*
(
1
)
audio
(
1
)
authorization
(
1
)
await for
(
1
)
behaviorsubject
(
1
)
beta
(
1
)
binary
(
1
)
binarysearch
(
1
)
blender
(
1
)
book
(
1
)
bottomsheet
(
1
)
break
(
1
)
broadcast
(
1
)
browser
(
1
)
bubbles
(
1
)
bug
(
1
)
build
(
1
)
buildcontext
(
1
)
buildnumber
(
1
)
bundle
(
1
)
button
(
1
)
bytecode
(
1
)
cache
(
1
)
camera2
(
1
)
cameramanager
(
1
)
cd
(
1
)
chrome
(
1
)
ci
(
1
)
circle
(
1
)
clean
(
1
)
clean architecture
(
1
)
cli
(
1
)
clip
(
1
)
clipboard
(
1
)
cloud ide
(
1
)
cmdlet
(
1
)
code
(
1
)
coding test
(
1
)
command
(
1
)
comparator
(
1
)
complexity
(
1
)
concurrency
(
1
)
conditional
(
1
)
const
(
1
)
constraint
(
1
)
constraintlayout
(
1
)
controlc
(
1
)
controlv
(
1
)
converter
(
1
)
copy
(
1
)
copy project
(
1
)
coupling
(
1
)
coverage
(
1
)
cp
(
1
)
css
(
1
)
cupertino
(
1
)
cursor
(
1
)
cv
(
1
)
data class
(
1
)
data structure
(
1
)
dataBinding
(
1
)
database
(
1
)
debounce
(
1
)
decompile
(
1
)
delegate
(
1
)
deno
(
1
)
design pattern
(
1
)
development
(
1
)
device
(
1
)
di
(
1
)
dialog
(
1
)
dio
(
1
)
drawable
(
1
)
drug
(
1
)
emmet
(
1
)
encoding
(
1
)
english
(
1
)
entries
(
1
)
environment
(
1
)
equality
(
1
)
equatable
(
1
)
euc-kr
(
1
)
euckr
(
1
)
exit
(
1
)
expand
(
1
)
expanded
(
1
)
export
(
1
)
extension method
(
1
)
facade
(
1
)
fake
(
1
)
field
(
1
)
figma
(
1
)
final
(
1
)
fixed
(
1
)
flutter pub
(
1
)
flutter web
(
1
)
flutter_inappwebview
(
1
)
flutter_test
(
1
)
flutterflow
(
1
)
fold
(
1
)
fonts
(
1
)
form
(
1
)
frame
(
1
)
future
(
1
)
gestureDetector
(
1
)
gestureRecognizer
(
1
)
gesturearena
(
1
)
get-command
(
1
)
get_cli
(
1
)
getbuilder
(
1
)
getx단점
(
1
)
gitignore
(
1
)
glut
(
1
)
google fonts
(
1
)
gopath
(
1
)
goto
(
1
)
gradient
(
1
)
graphics
(
1
)
gvim
(
1
)
hackaton
(
1
)
hash
(
1
)
hashmap
(
1
)
hot reload
(
1
)
how to
(
1
)
html
(
1
)
i18n
(
1
)
icon
(
1
)
id
(
1
)
impeller
(
1
)
implementation
(
1
)
import
(
1
)
indicator
(
1
)
inkwell
(
1
)
interrupt
(
1
)
intl
(
1
)
introduction
(
1
)
io
(
1
)
isar
(
1
)
iterable
(
1
)
iteration
(
1
)
javascript
(
1
)
julia
(
1
)
juno
(
1
)
jupyter
(
1
)
kakaomap
(
1
)
keytool
(
1
)
korean
(
1
)
kotlin syntax
(
1
)
l10n
(
1
)
lambda
(
1
)
language
(
1
)
layer
(
1
)
layout
(
1
)
lineageOS
(
1
)
localkey
(
1
)
localtoglobal
(
1
)
long list
(
1
)
ls
(
1
)
mac osx
(
1
)
markdown
(
1
)
markup
(
1
)
material
(
1
)
method
(
1
)
microtask
(
1
)
migrate
(
1
)
mintlify
(
1
)
mock
(
1
)
module
(
1
)
monitor
(
1
)
moor
(
1
)
mouse
(
1
)
mouseregion
(
1
)
multiplatform
(
1
)
multiset
(
1
)
multithread
(
1
)
mutable
(
1
)
mvvm
(
1
)
new
(
1
)
node
(
1
)
nodejs
(
1
)
nosuchmethod
(
1
)
null-safety
(
1
)
numberformat
(
1
)
nvim
(
1
)
object
(
1
)
objectbox
(
1
)
objectkey
(
1
)
obx
(
1
)
online ide
(
1
)
operator
(
1
)
orientation
(
1
)
parabeac
(
1
)
parse
(
1
)
paste
(
1
)
path
(
1
)
pattern
(
1
)
pitfall
(
1
)
play store
(
1
)
pod
(
1
)
podfile
(
1
)
pointer
(
1
)
pointers
(
1
)
powershell
(
1
)
private
(
1
)
programming
(
1
)
pull to refresh
(
1
)
puzzle
(
1
)
pycharm
(
1
)
realitykit
(
1
)
recursion
(
1
)
reduce
(
1
)
reference
(
1
)
regex
(
1
)
regular expression
(
1
)
release note
(
1
)
renderbox
(
1
)
renderobject
(
1
)
repl
(
1
)
repository
(
1
)
response
(
1
)
rm
(
1
)
rotue
(
1
)
round
(
1
)
run
(
1
)
scope
(
1
)
scroll
(
1
)
search
(
1
)
server
(
1
)
serverless
(
1
)
service
(
1
)
sharp
(
1
)
singlerepo
(
1
)
singleton
(
1
)
sketch
(
1
)
sliver
(
1
)
sliverlist
(
1
)
snippets
(
1
)
sogae
(
1
)
sorting
(
1
)
source
(
1
)
sparse
(
1
)
sparse array
(
1
)
spec
(
1
)
split
(
1
)
sqflite
(
1
)
sqlite
(
1
)
sqrt decomposition
(
1
)
stateful
(
1
)
statefulwidget
(
1
)
step
(
1
)
stepper
(
1
)
string
(
1
)
stringbuffer
(
1
)
stringbuilder
(
1
)
studio
(
1
)
study
(
1
)
sub-directory
(
1
)
svn
(
1
)
swiftui
(
1
)
swipe to refresh
(
1
)
system_alert_window
(
1
)
system_cache
(
1
)
systemnavigator
(
1
)
tail recursion
(
1
)
tailrec
(
1
)
tap test
(
1
)
text
(
1
)
texteditingcontroller
(
1
)
textfield
(
1
)
texttheme
(
1
)
themedata
(
1
)
then
(
1
)
thread
(
1
)
throttle
(
1
)
time
(
1
)
tool
(
1
)
tools
(
1
)
tooltip
(
1
)
ts
(
1
)
tutorial
(
1
)
typescript
(
1
)
ui
(
1
)
unittest
(
1
)
update
(
1
)
usb
(
1
)
utf8
(
1
)
ux
(
1
)
valuekey
(
1
)
variable
(
1
)
vector
(
1
)
versioncode
(
1
)
very_good
(
1
)
view
(
1
)
vim plugin
(
1
)
vimrc
(
1
)
virtualenv
(
1
)
wasm
(
1
)
web app
(
1
)
webview_flutter
(
1
)
while
(
1
)
widget tree
(
1
)
window
(
1
)
wsl
(
1
)
yield
(
1
)
강의
(
1
)
개발
(
1
)
개발 공부
(
1
)
공부법
(
1
)
그래픽스
(
1
)
꼬리재귀
(
1
)
꿀팁
(
1
)
데노
(
1
)
두줄
(
1
)
디노
(
1
)
번역
(
1
)
블록
(
1
)
상태관리
(
1
)
실험
(
1
)
안드로이드
(
1
)
안드로이드프로젝트
(
1
)
안드로이드프로젝트복사
(
1
)
어이없는
(
1
)
조건부 임포트
(
1
)
주절주절분노조절실패의식으흐름
(
1
)
패키지
(
1
)
프로젝트복사
(
1
)
플러그인
(
1
)