としおの読書生活

田舎に住む社会人の読書記録を綴ります。 主に小説や新書の内容紹介と感想を書きます。 読書の他にもワイン、紅茶、パソコン関係などの趣味を詰め込んだブログにしたいです。

カテゴリ: Androidアプリ

flutter-top


本記事では、Flutterで作成したアプリの画面にヘッダーを追加する方法を説明します。



ヘッダーを実装する


今回、ヘッダー部分はmain.dartとは別のheader.dartというファイルを作成してそちらに実装していきます。

header.dartはmain.dartと同じフォルダに作成します。

事前準備として最初にmain.dartを作ります。

main.dart
import 'package:flutter/material.dart';
import 'header.dart';

void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
appBar: Header(), // appBar プロパティに AppBar Widget を追加
),
);
}
}

appBar:と書かれている部分で、これから実装していくHeaderクラスを呼び出しています。



タイトルを追加する


まずは、ヘッダー部分に画面のタイトルが表示されるようにしていきます。

header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget{
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context){
return AppBar(
title: Text('ホーム'), // タイトル名
backgroundColor: Colors.black87, // ヘッダーの色
centerTitle: true, // タイトルの表示位置
);
}
}

これでアプリを実行してみると以下のような画面になります。

キャプチャ

ヘッダーに画面タイトルが表示されたことを確認できました。


アイコンを追加する


次はヘッダーにアイコンを追加していきます。

まずはよくある設定ボタンのようなアイコンを追加してみます。

先ほどのheader.dartを以下のように書き換えてみます。

header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget{
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context){
return AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0), // マージンの設定
child: Icon(Icons.settings), // アイコンの種類
),
title: Text('ホーム'), // タイトル名
backgroundColor: Colors.black87, // ヘッダーの色
centerTitle: true, // タイトルの表示位置
);
}
}

これを保存すると画面が以下のように変わります。

キャプチャ

アイコンの種類は、
child: Icon(Icons.settings), // アイコンの種類
の部分を変更することで可能です。

Flutterのアイコンの種類ってむちゃくちゃ多いので好みのアイコンを探したい場合、以下のサイトが参考になるかもしれません。




アイコン一つだけなのもさびしいのでもう一つアイコンを追加してみましょう。

header.dart
import 'package:flutter/material.dart';

class Header extends StatelessWidget with PreferredSizeWidget{
@override
Size get preferredSize => Size.fromHeight(kToolbarHeight);

@override
Widget build(BuildContext context){
return AppBar(
leading: Padding(
padding: const EdgeInsets.all(8.0), // マージンの設定
child: Icon(Icons.settings), // アイコンの種類
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(Icons.add),
),
],
title: Text('ホーム'), // タイトル名
backgroundColor: Colors.black87, // ヘッダーの色
centerTitle: true, // タイトルの表示位置
);
}
}

header.dartを保存すると画面が以下のように変わります。

キャプチャ

ちなみにleadingで定義したアイコンは左側、actionsで定義したアイコンは右側に表示されます。



まとめ


今回はシンプルなアイコンを実装してみました。

Flutterはアイコンの種類が多いのでどのアイコンを使うか迷いそうです。

次はヘッダのアイコンをタップしたときの動作なんかを実装していきたいです。







flutter-top


Flutterの魅力の一つとしてホットリロードがよくあげられています。

しかし、正直Flutter初心者の私からしてみたらそれってどんな機能だと疑問に思ったので本記事では、Flutterのホットリロードを実際に行ってみます。



ホットリロードを使ってみる


まずは新規プロジェクトを作成して、main.dartの中身を以下のようにしておきます。

import 'package:flutter/material.dart';

void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
body: Center(child: Text("ホットリロードって何?")),
),
);
}
}

この状態でエミュレータを起動して実行ボタンを押下してみると、エミュレータでアプリが起動して以下のような画面が表示されます。

キャプチャ


ここからホットリロードを試してみます。

アプリを実行したままの状態でmain.dartを以下のように書き換えてみましょう。

import 'package:flutter/material.dart';

void main() {
runApp(App());
}

class App extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false, // <- Debug の 表示を OFF
home: Scaffold(
body: Center(child: Text("これがホットリロードだ!!")),
),
);
}
}

main.dartを保存後、エミュレータの画面を確認すると以下のようになっているはずです。

キャプチャ

なんとアプリを再起動していないのに表示内容が変わっているという!!

ソースコードを書き換えるだけで、再実行しなくてもアプリの機能が変更されるのがホットリロードです!!



ホットリロードの利点


ホットリロードには以下の利点があります。

  • ソースコードを変更後、すぐに動作確認ができる
  • デザインだけ変更したい場合の確認が楽になる




まとめ


ホットリロードは微細な変更点を確認するときにすごく便利な機能です。

ホットリロードを有効活用して、スムーズな開発を行いましょう。





WindowsにFlutterとAndroid StudioをインストールしてAndroidアプリの開発環境を整える方法をまとめました。



Flutterアプリを実行


Flutter SDK releaseよりWindowsの最新版をダウンロートします。

キャプチャ

ダウンロードができたら任意の場所にzipファイルを展開します。

展開完了後 "flutter\bin" までのパスを通します。

今回はCドライブの直下に展開したので「C:\flutter\bin」のパスをとおします。



flutter doctorを実行する


PowerShellを起動して以下のコマンドを実行してみてください。

flutter doctor

futter doctorを実行することでFlutterを作成するための開発環境が整っているのかを確認することができます。

キャプチャ

Xの箇所が問題がある項目のようなのでこれらを解消していきます。

今回の場合、VS CodeやAndroid Studioをすでにインストールしていたため、Android toolchainしか問題が発生していませんが、他の問題の解決方法も書いておきます。


[!]Android toolchain


Androidのライセンスが確認できないという項目です。

一般的には、以下のコマンドを実行することで解決することができるみたいです。

flutter doctor --android-licenses

ただ私がこのコマンドを実行してみたところ以下のエラーがでました。

Android sdkmanager tool not found (C:~~\Local\Android\sdk\tools\bin\sdkmanager).
Try re-installing or updating your Android SDK,
visit https://flutter.dev/docs/get-started/install/windows#android-setup for detailed instructions.

このエラーについて調べてみたところ、Android StudioでAndroid SDK toolsがインストールされていないことが原因みたいです。

Android Studioの設定 → 外観&振る舞い → システム設定 → Android SDK → SDKツールの画面を開いて廃止パッケージを隠すのチェックをはずして、Android SDK Toolsにチェックを入れることで解決することができます。

キャプチャ


[!]Android Studio


Android Studioをインストールして、Flutterのプラグインをインストールすることで解決できます。

Android Studioのインストールは公式サイトからインストーラをダウンロードして行いましょう。

Flutterのプラグインのインストールは、Android Studioを起動し、
設定  → プラグイン画面からインストールすることができます。

キャプチャ


[!]VS Code


VSCodeをインストールして、拡張機能からFlutterをインストールすることで解決することができます。

Android Studioで解決を行う場合、無理に解決を行わなくても大丈夫です。

キャプチャ


以上で開発環境の作成は終わりです。



サンプルアプリを動かしてみる


開発環境ができあがったところで、実際にFlutterを使用して簡単なアプリを作成してみましょう。


Flutterプロジェクトの作成


まずは、Android Studioを起動して、新規のFlutterプロジェクトを作成します。

キャプチャ

Flutterアプリケーションを選択して、次へを押下します。

キャプチャ

Flutter SDK パスにはFlutterを展開した場所のパスを入力してください。

キャプチャ

完了をクリックします。

キャプチャ

以上でデモアプリが作成されました。


仮想デバイスの作成


デモアプリが作成できたら、アプリを実行するための仮想デバイスを追加してあげましょう。

ツールメニューからAVDマネージャーを選択します。

キャプチャ

仮想デバイスの作成を押下します。

キャプチャ

好きなデバイスを選択して次へを押します。

キャプチャ

好きなシステムイメージをダウンロードして次へを押下します。

今回はQをダウンロードしました。

キャプチャ

完了を押下します。

キャプチャ

エミュレータが作成できたので実行ボタンを押下して起動しましょう。

キャプチャ

起動すると以下のような画面が立ち上がります。

キャプチャ


Flutterアプリを実行


仮想デバイスが起動できたら、実行ボタンを押下してアプリを起動します。

キャプチャ

エミュレータに以下のような画面が現れたら実行成功です。

キャプチャ


以上で環境構築完了です。

これでアプリ開発に取り組めますね。


↑このページのトップヘ