flutter - 버튼에 기능부여 floatingActionButton
본문
import 'package:flutter/material.dart';
void main() {
runApp(Suse_App());
}
class Suse_App extends StatefulWidget {
@override
State createState() => _Suse_AppState();
}
class _Suse_AppState extends State {
var susu = 1; // 상태 변수
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Flutter Demo'),
),
body: ListView.builder(
itemCount: 3,
itemBuilder: (context, index) {
return ListTile(
title: Text('매일같이 자신만의 속도로 세상을 살아갑니다.'),
);
},
),
floatingActionButton: FloatingActionButton(
child: Text(susu.toString()), // 버튼에 숫자 표시
onPressed: () {
setState(() {
susu++; // 상태 변경 및 화면 갱신
});
},
),
),
);
}
}
본문
StatelessWidget 상태가 없는 위젯. 화면이 고정되어 있고 데이터가 변경되지 않고 StatefulWidget 상태가 잇는 위젯으로 데이터의 변경에 따라 화면이 재랜더링이 됩니다
class Suse_App extends StatelessWidget {
var susu = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
child: Text(susu.toString()), // 버튼에 숫자 표시
onPressed: () {
susu++; // 클릭 시 숫자 증가
},
),
),
);
}
}
위 코드는 StatelessWidget 를 사용하여 버튼 클릭시 숫자를 증가시키는 기능을 구현 부분이며 버튼을 클릭시 susu의 변수값이 증가하지만 화면에 변화가 발생하지 않습니다 그 이유는 StatelessWidget 이 재렌더링이 되지 않았기 때문입니다
class Suse_App extends StatefulWidget {
@override
State<Suse_App> createState() => _Suse_AppState();
}
class _Suse_AppState extends State<Suse_App> {
// 상태 변수
var susu = 1;
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
child: Text(susu.toString()), // 현재 숫자를 표시
onPressed: () {
setState(() {
susu++; // 상태 변경
});
},
),
),
);
}
}
이때 사용되는 내용이 StatefulWidget 위젯이며 사용하면 상태 변경에 따라 화면을 갱신할 수 있습니다 이때 2가지 주요 요소가 필요하며 위젯 클래스(StatefulWidget)를 전체 구조를 정의하고 상태 클래스(State)로 위젯의 상태와 이를 변경하는 로직을 포함해야됩니다
setState() 함수가 호출되면서 화면이 갱신되고 버튼에 표시된 susu 값이 증가하게 됩니다
주요 함수 요약
StatelessWidget
상태를 관리하지 않음. 화면 갱신이 필요 없는 경우 적합.
StatefulWidget
상태를 관리함. 화면 갱신이 필요한 경우 사용.
setState
상태를 변경하고 변경된 상태를 화면에 반영하기 위해 호출.
FloatingActionButton
onPressed 이벤트와 child 속성을 통해 버튼 동작과 UI를 정의.
댓글목록0