マガジンのカバー画像

妻が欲しいアプリをFlutterで作る

12
本
妻が欲しがるアプリを作るためにFlutterを始めました。Flutterについて学んだことを残していくマガジンで、ちょっとでも僕がつまずいたらログとして残していくため内容は細かい… もっと読む
運営しているクリエイター
オオバ

妻が欲しいアプリをFlutterで作る その11_Providerを使って子Widgetにデータを渡す

妻が欲しいアプリをFlutterで作るシリーズの11回目です。 前回StatefulWidgetのwidgetプロパティでデータを受け渡すという事をしました。 本記事ではProviderクラスを使った方法の紹介です。 pubspec.yamlにproviderを追加dependencies: flutter: sdk: flutter # providerを使うために追加 provider: ^4.0.2 provider: ^4.0.2をdependencie

オオバ

妻が欲しいアプリをFlutterで作る その11_名前付きコンストラクタとの邂逅

Dartには名前付きコンストラクタというものを初めて知ったのでそのメモです。 「クラス名._」って何？class Foo{ Foo._();} Flutterのプロジェクトを読んでいると出てきた上記の文法。 調べてみると名前付きコンストラクタという言語仕様がDartにはありました。 名前付きコンストラクタとはclass Foo { String get Str => _str; String _str; // 名前付きコンストラクタ Foo.x(){

オオバ

妻が欲しいアプリをFlutterで作る その10_親からStatefulWidgetにパラメータを渡して任意のタイミングで表示を更新する

妻が欲しいアプリをFlutterで作るシリーズの10回目です。 個人的にFlutterでハマったポイントです。 どうやってStatefulWidgetにパラメータを渡すのか？ 上のDEMOは親要素から渡さされた文字列を、ボタンを押したタイミングで子要素のViewに反映するシンプルなものです。 コンストラクタで表示したい文字列を送るStatefulWidgetを継承したFirstScreenクラスをアプリ起動時に表示させます。FirstScreenのコンストラクタで子要

オオバ

妻が欲しいアプリをFlutterで作る その9_Columnウィジットの上下整列設定

妻が欲しいアプリをFlutterで作るシリーズの9回目です。 デフォルト上に寄ってしまうColumenウィジット。中央に要素を揃えるTipsです。 enum MainAxisAlignmentを設定する ColumnメソッドのmainAxisAlignmentプロパティを設定します。 Column( children: [ Text("ボタン達"), RaisedButton( onPressed: () {}, child: Text("ボタン

オオバ

妻が欲しいアプリをFlutterで作る その8_StatefulWidgetで入力テキストを活用する

妻が欲しいアプリをFlutterで作るシリーズの8回目です。 「妻が欲しいアプリをFlutterで作る その7_テキスト入力最小実装」の続きです。 StatefulWidgetを使う・StatefulWidgetを継承したクラス(ここではTとする) ・State<T>を継承したクラス StatefulWidgetを使う場合はこの2つが必要になります。 // StatefulWidgetを継承したクラス(ここではTとする)class InputField extends

オオバ

妻が欲しいアプリをFlutterで作る その7_テキスト入力最小実装

妻が欲しいアプリをFlutterで作るシリーズの7回目です。 Flutterで文字列を入力する、いわゆるテキストフィールドの実装をしていきます。 TextFieldウィジットを使用TextField( enabled: true,)  最小実装する上では、enabledプロパティにtrueを入れる必要があります。 ※デフォルト非アクティブで入力できません ソースコード全文import 'package:flutter/material.dart';void main(

オオバ

妻が欲しいアプリをFlutterで作る その6_全面背景画像

妻が欲しいアプリをFlutterで作るシリーズの6回目です。 このように全面に背景を表示させる方法についてです。 ・背景画像 ・次のページへボタン というレイヤー構造を作る必要があるため、Stackウィジットを使います。 StackウィジットchildrenプロパティにWidgetを配列で渡し、indexが小さい順から描画されるます。 return Scaffold( body: Stack( children: [ // 全面背景

オオバ

妻が欲しいアプリをFlutterで作る その5_ファイルを分けてインポートする

妻が欲しいアプリをFlutterで作るシリーズの5回目です。 前回作成した画面遷移の各画面のソースコードのファイルを分けてみます。 ※今まではmain.dartに全て書いてきました。 ・ホーム ・ページ1 この2画面を行ったり来たりするアプリです。 ・Home.dart ・page/Page1.dart この2ファイルにHome、Page1それぞれのクラスをmain.dartから移します。 Home.dart(ホーム画面)import 'package:flutt

オオバ

妻が欲しいアプリをFlutterで作る その4_画面遷移の実装

妻が欲しいアプリをFlutterで作るシリーズの4回目です。 ・ホーム ・ページ1 この2画面を行ったり来たりする簡単な画面遷移を実装していきます。 各画面を作成Home、Page1というクラスをStatelessWidgetを継承して作成します。 Homeクラス各ページには遷移用のボタンのみの構成ですが、分かりやすいように背景色を変えています。 class Home extends StatelessWidget{ @override Widget build(B

オオバ

妻が欲しいアプリをFlutterで作る その3_アプリ同梱の画像を表示させる

妻が欲しいアプリをFlutterで作るシリーズの3回目です。 Flutterでアプリ同梱の画像ファイルを表示する方法です。  表示させる画像をプロジェクトに追加 準備としてimagesフォルダを作成して以下のtest.jpgを格納します。 pubspec.yamlにassetsを追加 pubspec.yamlの以下の部分のコメントアウトを外します。 # To add assets to your application, add an assets section

オオバ

妻が欲しいアプリをFlutterで作る その2_外部パッケージの利用

妻が欲しいアプリをFlutterで作るシリーズの2回目です。 Flutterの外部パッケージ機能を使って、バー部分とボディテキストにランダムな英語キーワードを表示するサンプルです。 ソースコードは前回からの続きとなっています。 環境・Android Studio4.1.0 ・macOS Catalina 10.15.7 以下のドキュメントを参考にしています。 pubspec.yamlの修正プロジェクトルートにあるpubspec.yamlのdependenciesに修

オオバ

FlutterでHelloWorld〜妻が欲しいアプリをFlutterで作るために〜

常日頃、妻が料理系のアプリが欲しいと言っています。そのアプリを当初Unityでサクッと作ろうと思いましたが、新しい技術を学ぶきっかけとしてFlutterで作ってみようと思います。 僕自身は日頃Unityでゲームづくりをしていて、Flutterの知識はゼロです。もちろんDartという言語の知識もゼロ。ここから始めます。 あいた時間で学んでいくため粒度は細かくなるかも知れませんが、上記のマガジンにログを残していく予定です。 本記事は1本目。まずはシミュレータで動かすHell

オオバ