Flutter로 개발하기(23) - Bloc 튜토리얼
Bloc document - 튜토리얼
원문: https://felangel.github.io/bloc
플러터
Counter
Setup
터미널에서
flutter create flutter_counter
pubspec.yaml에서
name: flutter_counter
description: A new Flutter project.
version: 1.0.0+1
environment:
sdk: ">=2.0.0-dev.68.0 <3.0.0"
dependencies:
flutter:
sdk: flutter
bloc: ^0.10.0
flutter_bloc: ^0.8.0
meta: ^1.1.6
dev_dependencies:
flutter_test:
sdk: flutter
flutter:
uses-material-design: true
다시 터미널에서
flutter packages get
Counter Events
enum CounterEvent { increment, decrement }
Counter Bloc(Counter States 포함)
class CounterBloc extends Bloc<CounterEvent, int> {
@override
int get initialState => 0; // 초기 상태 생성
@override
Stream<int> mapEventToState(int currentState, CounterEvent event) async* {
// 이벤트 처리
switch (event) {
case CounterEvent.decrement:
yield currentState - 1;
break;
case CounterEvent.increment:
yield currentState + 1;
break;
}
}
}
Counter App
void main() => runApp(MyApp());
// CounterBloc을 생성하고 dispose할 수 있도록 StatefulWidget으로 선언합니다.
class MyApp extends StatefulWidget {
@override
State<StatefulWidget> createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
final CounterBloc _counterBloc = CounterBloc();
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
// CounterPage의 위젯트리에서 CounterBloc 인스턴스를 사용할 수 있도록 CounterPage를 BlocProvider로 감쌉니다.
home: BlocProvider<CounterBloc>(
bloc: _counterBloc,
child: CounterPage(),
),
);
}
@override
void dispose() {
_counterBloc.dispose();
super.dispose();
}
}
Counter Page
class CounterPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
// BlocProvider.of<CounterBloc>(context)를 사용해서 CounterBloc 인스턴스 접근합니다.
final CounterBloc _counterBloc = BlocProvider.of<CounterBloc>(context);
return Scaffold(
appBar: AppBar(title: Text('Counter')),
// 바뀐 상태를 기반으로 리빌드 하기 위해서 BlocBuilder로 감쌉니다.
body: BlocBuilder<CounterEvent, int>(
bloc: _counterBloc,
builder: (BuildContext context, int count) {
return Center(
child: Text(
'$count',
style: TextStyle(fontSize: 24.0),
),
);
},
),
floatingActionButton: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
_counterBloc.dispatch(CounterEvent.increment);
},
),
),
Padding(
padding: EdgeInsets.symmetric(vertical: 5.0),
child: FloatingActionButton(
child: Icon(Icons.remove),
onPressed: () {
_counterBloc.dispatch(CounterEvent.decrement);
},
),
),
],
),
);
}
}
Infinite List
원문: https://felangel.github.io/bloc/#/flutterinfinitelisttutorial?id=flutter-infinite-list-tutorial
Login
원문: https://felangel.github.io/bloc/#/flutterlogintutorial?id=flutter-login-tutorial
Weather
원문: https://felangel.github.io/bloc/#/flutterweathertutorial?id=flutter-weather-tutorial
Todos
원문: https://felangel.github.io/bloc/#/fluttertodostutorial?id=flutter-todos-tutorial
Angular Dart
생략
Flutter + Angular Dart
생략