Flutterでデスクトップアプリのメモ
Flutterでデスクトップアプリを作る手順
インストール
まずインストール
git
VSCode
Flutter for VScode
パレット（Ctrl＋Shift＋P）で「Flutter: New Project]」を選択。
SDKがないといわれたのでインストール。
インストール時にはPathを通すダイアログでOKしておく。
コンソールからアプリを作る
ターミナルにて
flutter config --enable-windows-desktop # for the Windows runner
「flutter devices」を実行し、Windows（desktop)がでればOK。
以下でgitにプロジェクトを作ります。
flutter create github_client
プロジェクトへ入り、runで実行します。
cd github_client
flutter run
選択画面がでたら１でウィンアプリが起動しれば、とりあえずOK。
EXEの作成はこちら。
flutter build windows --release
すると「 C:\Users\{ユーザ名}\github_clientbuild\windows\x64\runner\Release\github_client.exe」のところにEXEが造られました！
参考：
【Flutter】Windows Desktop アプリのビルド方法と開発環境の構築
VSCodeからアプリを作る
では再度パレット（Ctrl＋Shift＋P）で「Flutter: New Project]」を選択。
プロジェクトフォルダ、名前を指定して作成。
空のアプリケーションができあがります。次回からは作ったフォルダを指定してファイルを開けばOK.
ターゲットをバーから確認。
F5を押すか、「実行＞デバッグの開始」を実行。
これでウィンドウが出てくればOK。
アイコンを追加する
アプリアイコンの追加です。
Flutter で Windows 向けにビルドした exe ファイルにアイコンを付ける方法は、
windows/runner/resources/app_icon.ico を差し替えるだけで OK です。
スマホ版では、1024x1024でpng画像を用意。
yawlで
dev_dependencies:
flutter_launcher_icons: ^0.13.1flutter_icons:
android: true
ios: true
image_path: "assets/icon.png"
を指定。
コマンドから以下を実行してアイコンデータを追加します。
flutter pub get
flutter pub run flutter_launcher_icons
アンドロイドアプリを作成
コマンドから以下を実行。
flutter build apk --debug
これで「build\app\outputs\apk\debug」内に「app-debug.apk」が作成されます。
アプリ名を指定するには「android/app/src/main/AndroidManifest.xml」へ記述しておきます。
<application
android:label="ｘｘｘｘアプリ"
android:name="${applicationName}"
android:icon="@mipmap/ic_launcher">
...
</application>
サンプルコード集
Hello Worldを表示するコード
Empty Project＝からのプロジェクトを作ります。
するとHello Worldだけを表示します。
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}class MainApp extends StatelessWidget {
const MainApp({super.key});@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello World!'),
),
),
);
}
}
画像を表示する１
import 'package:flutter/material.dart';void main() {runApp(const MyApp());}class MyApp extends StatelessWidget {const MyApp({super.key});@overrideWidget build(BuildContext context) {return MaterialApp(// ← const を外したtitle: 'Image Sample',home: Scaffold(appBar: AppBar(title: const Text('ネットワーク画像表示'), // これはconst OK),body: Center(child: Image.network(),),),);}}
画像を表示する２
アセット内の画像を表示します。
まずは画像を置きます。
your_project/
assets/
test.png ← ここに画像ファイルを置く
pubspec.yaml に assets を登録。インデントに注意。
flutter:
uses-material-design: true
assets:
- assets/test.png
yamlはプロジェクト内にあります。
実行ソース：
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}class MyApp extends StatelessWidget {
const MyApp({super.key});@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Local Image Sample',
home: Scaffold(
appBar: AppBar(title: const Text('ローカル画像表示')),
body: Center(
child: Image.asset(
'assets/test.png', // assetsフォルダのtest.pngを参照
width: 300, // サイズ調整
),
),
),
);
}
}
複数のウィジェットをボタンで切り替えるサンプル
最初にボタン１，２があります。
おすと、１，２，を受け取って表示するウィジェットへ切り替えます。
もどるで最初に戻ります。
このサンプルコードがこちら。
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});@override
Widget build(BuildContext context) {
return const MaterialApp(title: 'Start Buttons Sample', home: HomePage());
}
}class HomePage extends StatelessWidget {
const HomePage({super.key});void _goDetail(BuildContext context, int number) {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => DetailPage(number: number)),
);
}@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: const Text('最初の画面')),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () => _goDetail(context, 1),
child: const Text('スタートボタン 1'),
),
const SizedBox(height: 16),
ElevatedButton(
onPressed: () => _goDetail(context, 2),
child: const Text('スタートボタン 2'),
),
],
),
),
);
}
}class DetailPage extends StatelessWidget {
const DetailPage({super.key, required this.number});final int number;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('詳細画面 $number'),
// AppBar の戻るボタン（自動表示）で Home に戻れます
),
body: Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('受け取った番号：$number', style: const TextStyle(fontSize: 24)),
const SizedBox(height: 24),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: const Text('戻る'),
),
],
),
),
);
}
}
