見出し画像

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でアプリを作っています。