自由に配置出来るウィジェットの作り方も覚えたので、 実際使うであろう形にしていこうかなと 一旦普通にGUIとしての形をくんでみようかなと思いました。

HTML+CSSで作るようなヘッダ＋メイン＋サイドバー＋フッター＋ドロワーメニュー をFlutterで実装します。

ヘッダはロゴやメニューを開くためのボタンなんかを置いたりして メインは前回作った自由に配置出来るウィジェットを置いて サイドバーは現在選択しているウィジェットの情報を表示するといったいわゆるプロパティインスペクタ。

フッターは著作表示やらコンソール的なものを実装出来たら便利だなと。

色々調べてていると最近のアプリはMVVMという手法でつくっていくのがいいみたいです。

従来の方法ではViewのコードが肥大化していくデメリットが有るため MVVMという手法がスッキリしていいそうですが、実際にやったことない手法なので とりあえず前にならえでMVVM手法を導入していこうと思います。

現状main.dartにすべてのコードを書いてたのはよろしくないので、 modelディレクトリとかviewディレクトリとかわけていきます。

MVVMの考え方

詳しくはググってもらったほうがいいですが軽く説明しておきます。

MVVMはModel-View-ViewModeの略です。

MVCの場合はModel-View-Controllerでしたね。

Viewはその名の通りウィジェットを描写したりユーザーからの入力を受け付けたりする いわゆるフロント部分になります。

ViewModelはViewから入力された状態をコネコネしてModelとして持ち、 Modelの状態をViewに渡して描画の更新を催促する役目を持ちます。

Modelは特にMVCとかと変わらず状態を保存する役目です。 Viewの状態なんてしったこっちゃないという感じですね。

今回参考にさせてもらったのはこのサイトです。

https://note.com/yasukotelin/n/n3cdd311fb336

基本的にこのnoteをみただけじゃコードが完成しないので、 かならずGithubにあげてくださっているコードを見て書くようにしましょう。

providerを使ってみる

「Flutter MVVM」で調べているとどうやらproviderというシンプルな状態管理ライブラリがあるそうです。

アプリを作っていると状態管理をするのがどんどん複雑になっていくことがあるので それをシンプルにできるようにしてくれるライブラリだそうなので百聞は一見にしかずってことで導入してみましょう。

providerを使って更新するとBindingしている部分だけを更新してくれるそうなので パフォーマンスも普通のときよりはよくなるそうなので入れない選択肢はあまりなさそうです。

参考サイトは少しバージョンが古いのとProviderのインストールが書かれていなかったので導入していきます。

現行バージョンは5.0.0なので一旦それをいれてみます。

ダメだったらバージョンを落としましょう。

ルートディレクトリにある「pubspec.yaml」を開いて

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2

  # ※以下追加部分
  # manual library add
  provider: ^5.0.0

providerをバージョンを明記して追加したら保存して 以下のコマンドを実行してください。

flutter pub get

これで適用されるはずです。

もしかするとエディタによってはpubspec.yamlを保存したときに自動的にpub getされるかもしれません。

VSCodeだとそのコマンドを実行しようとする前に保存したらなんかうごいたのですが それに気付かずpub getしたのでちょっとよくわからんくなりました。

手動でやるか自動でやるかの違いなのであまりきにしなくてもいいです。

参考のコードが無事動いたら今回はおわり

特に何もしてませんが、基本的には参考にさせてもらった以下の記事

Flutterでproviderを使ったMVVM開発 https://note.com/yasukotelin/n/n3cdd311fb336

を元にすべて手打ち入力して動かしただけなので載せるのも違うなと思い省略しました。

とりあえずWindowsアプリでもWeb版でも問題なく動いてくれました。

マルチプラットフォームっていうのは便利ですね。

次回はこれをベースに自分なりのレイアウトをくんでいこうかなと思います。