「Flutterで始めるモバイルアプリ開発」連載一覧
-
2022/05/12Flutterのマテリアルデザインを活用した日付入力と時間入力コンポーネントを紹介
今回は日付入力と時間入力コンポーネントを紹介します。日付入力では多くの場合にはカレンダーUIとセットになり、自分で作ろうとするとなかなか難しいUIです。また、日付も時間も入力制限をしないと無効な入力が発生してしまいます。しかし、今回紹介するコンポーネントを使えばそのような面倒なことを考えずに気軽に利用できます。
-
2022/03/07【Flutter開発の核となるマテリアルデザイン】スイッチ・スライダー・チップコンポーネントを紹介
前回までは、テキストやラジオボタン・チェックボックスなど、おおよそどのような環境にも共通して存在する汎用的な入力コンポーネントを紹介しました。今回紹介するコンポーネントは利用用途は限定されますが、利用者が入力しやすいようにするためのコンポーネントであるスイッチ・スライダー・チップコンポーネントを紹介します。
-
2021/12/17Flutterのマテリアルデザインをフル活用！ テキスト入力の設定・取得～ラジオボタン・チェックスボックスの入力コンポーネントを紹介
前回は、テキスト入力フィールドの表示方法を中心に説明しましたが、今回はその続きで、入力値の取得方法と外部からの入力値の設定方法を紹介します。また、ラジオボタンとチェックスボックスの入力コンポーネントを紹介します。
-
2021/12/06Flutterのマテリアルデザインを使ったコンポーネントを紹介【入力コンポーネント編】
前回はボタンなどについて紹介しましたが、今回からは入力コンポーネントを紹介します。入力コンポーネントは種類が多いので、今回は利用することが多いテキスト入力について説明します。
-
2021/11/24Flutterが採用しているマテリアルデザインを使ったコンポーネントを紹介【ボタン編】
前回は、マテリアルデザインでのテキスト処理について説明しました。今回はボタンやメニューは利用者が操作の意思を伝えるコンポーネントであるボタンやメニューなどの表示コンポーネントを紹介します。
-
2021/11/09Flutterではマテリアルデザインを用いたコンポーネントをどう使うのか【テキスト編】
前回までは、レイアウトについて紹介しました。今回からは、テキストやボタン、入力コンポーネントなどのコンポーネントを紹介していきます。これらの多くのコンポーネントは、Flutterが採用している「マテリアルデザイン」をベースとしています。そのため、そのまま利用しても十分実用的なコンポーネントになっています。
-
2021/09/28Flutterでのレイアウトの組み合わせ方を学ぼう～実際の画面例を使用
前回は、基本的な各レイアウトウィジェットについて説明しました。画面レイアウトはさまざまな組み合わせ方法があり、その組み合わせ方法によって気を付けるポイントなどが変わってしまいます。そこで、今回は実際の画面サンプルを例にどのようにレイアウトを使っていくかを紹介します。基本的なレイアウトは前回紹介したレイアウトを使いつつも、前回紹介出来なかったレイアウトもいくつか含まれています。それらはソースコードとして説明していきますが、足りない部分はリファレンスなどを参照してください。
-
2021/09/07Flutterの基本的なレイアウトの考え方・仕組みを学ぼう
UIアプリケーションの開発で最もなやむのが、伝えたい情報や使ってほしい機能をどのように利用者に伝えるかということです。その中で、レイアウトは非常に重要な要素のひとつです。同じ情報であっても見せ方によって伝わりやすさ、効果が異なるからです。また、レイアウトの構成は、プログラムの構造にも影響を与えます。例えば、レイアウトを分ける場合には同時にソースコードも分けるということがあります。同じレイアウトを実現するにも、さまざまな方法があるのです。本記事では、そのようなレイアウトのしくみについて紹介します...
-
2021/08/05Flutter2の新しい画面遷移「Navigator 2.0」を使ったページ遷移を理解しよう
今回は、前回に引き続き画面遷移について説明します。Flutter2では、新しい画面遷移の仕組み（Navigator 2.0）が導入されました。この新しい画面遷移の方法は、少々複雑でわかりにくいところがあります。また、アプリ開発だけの場合であれば、必ずしもこの仕組みを導入する必要もないと思っています。しかし、Flutter2で正式サポートされたWebアプリなどを今後想定する場合や、新しい流れの参考としてご紹介します。まだまだ利用ノウハウなども多くないため、今後の参考として捉えていただければと思い...
-
2021/06/10基本的なページ遷移を理解しよう～Flutterでの画面遷移
今回と次回ではFlutterでの画面遷移について説明します。Flutter Ver1.x（以下、Flutter1と記す）ではモバイル端末などでの使用を前提として、比較的シンプルな画面遷移の仕組みを提供していました。Flutter2では、Webアプリなども対象になったことから、より汎用的な画面遷移の仕組みが導入されています。ただし、仕組みが完全に入れ替わったわけではなく、既存の画面遷移の仕組みを拡張する形で追加されています。そのため、今回はFlutter1からの画面遷移を説明し、次回、Flutt...
-
2021/05/11Flutterアプリの画面構成を理解しよう
Dart言語についてこれまで紹介してきましたが、今回からはFlutterアプリ開発についての紹介を再開します。また、第3回でFlutterアプリ構造の概要を説明しました。今回はその続きとなる内容で、Flutterアプリでの画面を作るためのUIを中心に説明します。
-
2021/04/19Dart言語の便利な拡張表現とパッケージ管理
これまでDart言語仕様について説明してきましたが、今回はそこで紹介できなかった「カスケード表記」や「コレクション作成の拡張表現」などのシュガーシンタックスや、パッケージの作成方法と利用方法やプロジェクトファイルについて紹介します。これまで紹介した内容に比べて小粒ではありますが、「カスケード表記」や「コレクション作成の拡張表現」などはコーディングする上で、便利な表記方法なのでぜひ覚えておくとよいです。
-
2021/03/03Dart言語でのプログラム設計でワンランク上を目指そう
前回と前々回でDart言語の基本を紹介しましたが、比較的他の言語と共通する言語使用部分が大きく占めていました。今回は、「Factoryコンストラクタ」「ミックスイン」「非同期処理」について紹介します。これらの機能を理解することは少々、難しい部分がありますが、Dartの特徴がより色濃く表れている部分でもあります。
-
2021/02/16Flutter開発で使うDart言語での関数・クラスの使い方を理解しよう
前回は、Dart言語の変数や型などの非常に基本的な部分を扱いました。今回も前回に引き続き、Dart言語仕様の部分について説明します。今回は、関数やクラスなどの使い方を紹介します。関数やクラスではDart言語の特徴がより強くなるので、他の言語を知っている方もその違いを知っておくと良いでしょう。
-
2021/02/04Flutter開発で必要なDart言語の基本を理解しよう
今回は、Flutterから少々離れてDartの文法について紹介します。筆者はDartを知った時、「JavaScriptとJavaのちょうど中間のような言語」という印象をもちました。また、JavaScriptの代わりによく使われはじめているTypeScriptにも似ていると言えます。一方で、他の言語と多少似ているがゆえに、少々迷ってしまうことや勘違いしてしまうこともあります。そこで、今回からはFlutterプログラミングを行う上で必要となる、Dart言語の基本部分を紹介します。
