今回からApple Musicの真ん中のタブに存在する「見つける」の画面を実装していきます。 このヘッダーの部分の実装 今回、使うウィジェットは SliverAppBar SliverFixedExtentList ScrollController この3つがメインになります。 Slivers について SliverAppB…

これから作成するしばらく開発するアプリのデザイン デザイン↓ Apple Music 企画倒れにならないように頑張らなくちゃ！

これまでクイズアプリ開発をしてきましたので、わかりやすいように目次のページを作りました。 Flutterで4択クイズアプリのレイアウトを実装する tamappe.hatenadiary.com 定数クラスの作成とウィジェットの共通化 tamappe.hatenadiary.com 選択肢のボタンを…

長かったクイズアプリの開発も本日でラストになります。 前回分はこちらです。 tamappe.hatenadiary.com 本日は問題の選択肢で正解を当てた時の処理を書いていきます。 ラストにクイズアプリ開発で書いたクラスファイルのソースコードを載せようと思います。…

本日はクイズアプリ開発の終盤、リセット画面のデザインを作っていきます。 前回分はこちらです。 tamappe.hatenadiary.com デザイン案として次のようなレイアウトを想定しています。 なお、AppBarの背景色は未着手です。 ソースコード 本当は過程を解説する…

1週間ぶりぐらいですが、クイズアプリのリセット画面でウィジェットの配置で苦戦しました。 前回分の記事はこちらです。 tamappe.hatenadiary.com Columnウィジェットで並べていましたので、mainAxisAlignmentを使えば中央寄せにできるかなと思ったのですが …

クロスプラットフォーム開発は初めてなので、どうやって端末の判別を行うのかを調べました。 Flutterではdart:ioをimport しないと駄目みたいです。 import 'dart:io'; 判別法 bool isIOS = Platform.isIOS; if (isIOS) { /// iOS } if (Platform.isAndroid)…

今回はFlutterでの画面の向きの制御について学習します。 画面を縦方向(Portrait)にのみ固定する サンプルコードです。 SystemChrome.setPreferredOrientations(List<DeviceOrientation> orientations)を使えばいいだけです。 と思ったらFlutter SDKのバージョンによって書き方</deviceorientation>…

前回のあらすじ tamappe.hatenadiary.com tamappe.hatenadiary.com tamappe.hatenadiary.com 今回はFlutterで4択クイズが終わったあとのリセット画面を実装したいと思います。 リセット画面 Sketchでデザインしました。 とりあえず、 正答数 リセットボタン …

今回は選択肢のボタンのデザインを綺麗にしていきます。 それとボタンをタップしたときの処理も書いていきます。 想定しているデザイン ボタンの角丸実装 まずはRaisedButtonに角丸を実装します。 過去記事に角丸を実装する方法について書いていますので復習…

今回は前回作成したクイズアプリのレイアウトのリファクタリングを行います。 tamappe.hatenadiary.com 前回はレイアウトの組立自体は完了しましたがwidgetのインデントが深くなりすぎていました。 Flutter開発の肝はwidgetのインデントはなるべく深くならな…

Flutterをインストールして最初に行うこと Textの使い方 tamappe.hatenadiary.com tamappe.hatenadiary.com ウィジェットのStateクラス tamappe.hatenadiary.com ボタンウィジェットの実装について tamappe.hatenadiary.com レイアウトの組み立て方 tamappe.…

本日はFlutterで4択クイズっぽいアプリを作っていきます。 特に体系的に学習するという意味ではないので企画倒れになるかもしれません。 Flutterのスキルアップとしてはちょうどいい題材かなと思っています。 アプリのデザイン構成 これから何日間かにわたっ…

本日は2月末とおよそ1ヶ月間Flutterを触ってみたので自分なりの意見をまとめてみようと思う。 正確には今年の1月中旬からさらなるスキルアップとしてFlutterを触っていました。 tamappe.hatenadiary.com 今回はわかりやすく目次を書いてみようと思います。 1…

今回はFlutterで関数をプロパティのように扱う方法について学習します。 簡単にいえば、Function型が存在することが理解できればOKです。 用途はButtonクラスにonPressedプロパティがあるのですが、これをカスタムウィジェットにするときに使われるやり方で…