Flutter生活はじめました
ファームノートの菅原です。
年始の宣言通り今日からFlutter生活を開始しました。
とりあえず、プロジェクトを作ってタブバーの制御をScopedModel経由で行ってみました。
タブを実装するのに参考にした記事
とりあえず下記の記事をみて実装しました。
まぁ素直でした。
Blocモデルが大変だったのでScopedModelで実装してみました。
とりあえずうまく動いてくれました。
下記が参考になりました。
Fluxっぽく実装したい
とりあえずStoreクラスを作って、そこに各種ScopedModelをぶら下げることにしてみました。
現状はRoutingのみ
// RoutingModel.dart
import 'package:scoped_model/scoped_model.dart';
class RoutingModel extends Model {
int _tabIndex = 0;
int get tabIndex => _tabIndex;
void setTabIndex(int index) {
// First, increment the counter
_tabIndex = index;
// Then notify all the listeners.
notifyListeners();
}
}
// Store.dart
import 'package:love_letter/store/RoutingModel.dart';
class Store {
final RoutingModel routingModel = RoutingModel();
}
// main.dart
void main() => runApp(MyApp(Store()));
class MyApp extends StatelessWidget {
final Store store;
MyApp(this.store);
@override
Widget build(BuildContext context) {
return ScopedModel<RoutingModel>(
model: store.routingModel,
child: MaterialApp(
home: Scaffold(
appBar: AppBar(
title: ScopedModelDescendant<RoutingModel>(
builder: (context, child, model) => Text('My Flutter App ${store.routingModel.tabIndex}')
),
),
bottomNavigationBar:BottomTab(store),
...
// BottomTab.dart
class BottomTab extends StatelessWidget {
final Store store;
BottomTab(this.store);
@override
Widget build(BuildContext context) {
return ScopedModel<RoutingModel>(
model: store.routingModel,
child: ScopedModelDescendant<RoutingModel>(
builder: (context, child, model) =>
BottomNavigationBar(
currentIndex: model.tabIndex,
onTap: (int page) => store.routingModel.setTabIndex(page),
items: [
BottomNavigationBarItem(
icon: new Icon(Icons.home),
title: new Text('Home'),
),
...
とりあえず、こんな感じで動いてくれました。
明日はちゃんとシングルトンにして、ConstructorでStoreをバケツリレーする面倒さを潰して行きたいと思います。
ファームノートでインタラクションデザイナーやってます。 最近はFigmaとFlutterでアプリを作っています。