[Flu] GetX 상태관리 / Extract code into a method
페이지 정보
작성자 sbLAB 댓글 0건 조회 2,855회 작성일 22-12-13 20:19본문
GetX 상태관리
- https://github.com/jonataslaw/getx#installing
- https://danawalab.github.io/flutter/2022/08/05/Flutter-Getx.html
- https://youtu.be/OXfG-D4PNpQ
Extract code into a method(복잡/반복적인 위젯(클래스)를 메서드로 분리)
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(GetMaterialApp(home: MyHomePage())); //GetMaterialApp
}
//GetX SimpleController Class
class SimpleController extends GetxController {
int counter = 0;
void increase() {
counter++;
update(); //update
}
}
//MyHomePage
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Get.put(SimpleController()); // SimpleController 등록
return Scaffold(
appBar: AppBar(
title: const Text("단순 상태관리"),
),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'FLUTTER',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.red,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: buildGetBuilder(), //재사용
),
Padding(
padding: const EdgeInsets.all(8.0),
child: buildGetBuilder(), //재사용
),
Padding(
padding: const EdgeInsets.all(8.0),
child: buildGetBuilder(), //재사용
)
]),
),
);
}
//반복적인 위젯(클래스)를 메서드로 분리
GetBuilder<SimpleController> buildGetBuilder() {
return GetBuilder<SimpleController>(
builder: (controller) { //컨트롤러 인스턴스(controller)
return ElevatedButton(
child: Text(
'Current Value : ${controller.counter}',
),
onPressed: () {
controller.increase();
//Get.find<SimpleController>().increase();
},
);
},
);
}
}
[AppBar Title 에도 Text 변경]
import 'package:flutter/material.dart';
import 'package:get/get.dart';
void main() {
runApp(GetMaterialApp(home: MyHomePage()));
}
class SimpleController extends GetxController {
int counter = 0;
void increase() {
counter++;
update();
}
}
//MyHomePage
class MyHomePage extends StatelessWidget {
MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
Get.put(SimpleController()); // controller 등록
return Scaffold(
appBar: AppBar(
title: buildTitleGetBuilder(), //AppBar Title
),
body: Center(
child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
const Padding(
padding: EdgeInsets.all(8.0),
child: Text(
'FLUTTER',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.red,
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: buildGetBuilder(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: buildGetBuilder(),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: buildGetBuilder(),
)
]),
),
);
}
GetBuilder<SimpleController> buildGetBuilder() {
return GetBuilder<SimpleController>(
// 실시간 렌더링
builder: (controller) {
return ElevatedButton(
child: Text(
'Current Value: ${controller.counter}',
),
onPressed: () {
controller.increase();
//Get.find<SimpleController>().increase();
},
);
},
);
}
GetBuilder<SimpleController> buildTitleGetBuilder() {
return GetBuilder<SimpleController>(
// AppBar 제목 실시간 렌더링
builder: (controller) {
return Text(
'Current Value: ${controller.counter}',
);
},
);
}
}
- 이전글[Android Studio] VSCode Theme for Android Studio 22.12.13
- 다음글[Flu] (Flutter + Android Studio) Shortcuts 22.12.13
댓글목록
등록된 댓글이 없습니다.