![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
Flutter の step by step（其の一）。
コチラを参考にして実施
https://flutter.dev/docs/get-started/install/windows
flutter_windows_x.x.x-stable.zip
C:\prog\dev\flutter
// ユーザーの環境変数に設定する例
$path =[System.Environment]::GetEnvironmentVariable('PATH','User')
$path +=";" + "C:\prog\dev\flutter\bin";
[System.Environment]::SetEnvironmentVariable('PATH',$path,'User')以下のCommandを実行し、TODOを確認する。
>flutter doctor
flutter doctor --android-licenses
%USERPROFILE%\AppData\Local\Android\Sdk\tools %USERPROFILE%\AppData\Local\Android\Sdk\tools\bin %USERPROFILE%\AppData\Local\Android\Sdk\platform-tools
%USERPROFILE%\.gradle\wrapper\dists\gradle-6.7-all\cuy9mc7upwgwgeb72wkcrupxe\gradle-6.7\bin
※ 前述のPowerShell?だと、%USERPROFILE%が展開されねぇんだけど...。
「File」メニュー -> 「Settings..」 -> 「Plugins」
以下のCommandを実行し、問題が無いことを確認する。
>flutter doctor Doctor summary (to see all details, run flutter doctor -v): [√] Flutter (Channel stable, 2.0.3, on Microsoft Windows [Version 10.0.19041.867], locale ja-JP) [√] Android toolchain - develop for Android devices (Android SDK version 30.0.3) [√] Chrome - develop for the web [√] Android Studio (version 4.1.0) [√] VS Code, 64-bit edition (version 1.47.2) [√] Connected device (2 available) • No issues found! >
SDKのパスを変更する場合、以下の手順に従って変更する。
Android Studioで、新規作成プロジェクトする。
| プロジェクトタイプ | 概要 |
| Flutter Application | アプリケーション用 |
| Flutter Plugin Android | ネイティブAPI用ライブラリ用 |
| Flutter Package | 画面部品用 |
| Flutter Module | Dartライブラリ用 |
| 入力項目 | 概要 |
| Project Name | プロジェクト名 |
| Flutter SDK path Project location | Flutter SDKをインストールしたフォルダを指定。 |
| Description | プロジェクト、アプリの説明 |
| Package Name | 通常、ドメインを反対にした値を入力 |
手順２で説明する。
Android Studioで1GB、エミュレータで6GB程、メモリを消費するので、
開発機のメモリが16GB程度では少々、スペック不足、故に実機でのデバッグを行うことになる。
%HOMEPATH%\AndroidStudioProjects\(flutter_app)\build\app\outputs\flutter-apk\app-release.apk※ コマンドの実行に、PATH環境変数の設定は必須。
を併用すると、RAD風に開発できる。
イベントを実装する。
RaisedButton(
child: const Text('Button'),
color: Colors.orange,
textColor: Colors.white,
onPressed: () {},
),
onPressedに、任意のメソッドを書く。
ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
primary: Colors.orange,
onPrimary: Colors.white,
),
onPressed: () {},
),
FlatButton(
child: const Text('Button'),
textColor: Colors.black,
onPressed: () {},
),
onPressedに、任意のメソッドを書く。
TextButton(
child: const Text('Button'),
style: TextButton.styleFrom(
primary: Colors.black,
),
onPressed: () {},
),
OutlineButton(
child: const Text('Button'),
onPressed: () {},
),
onPressedに、任意のメソッドを書く。
OutlinedButton(
child: const Text('Button'),
style: OutlinedButton.styleFrom(
primary: Colors.black,
),
onPressed: () {},
),
ボタンでない、任意のWidgetに、イベントを実装できる。
簡単に、Ripple エフェクトを付ける事が出来る。
Material( // 親にMaterialが必須
color: Colors.blue, // Material自体は青を指定
child: Center( //
child: Ink( // ここをContainerにするとsplashが効かないので、Inkに変える
color: Colors.yellow, // 背景色はここで指定
width: 200.0,
height: 100.0,
child: InkWell(
onTap: () {},
child: Center(child: Text('YELLOW'))
),
),
),
)
InkWellのRipple エフェクトは無いが、
他のイベント（ジェスチャー）にも反応する。
GestureDetector(
// タッチ検出対象のWidget
child: Text(
'How to use GestureDetector',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
// ダブルタップ
onDoubleTap: _incrementCounter
)
これは、画面遷移ではないし、SliverAppBar?のUX自体に、誰得感がある。
パッケージの追加と利用
english_wordsをパッケージの追加・利用する。
dependencies:
english_words: ^4.0.0
flutter:
sdk: flutterimport 'package:english_words/english_words.dart';
class _MyHomePageState extends State<MyHomePage> {
String _counter = 'hoge';
void _incrementCounter() {
setState(() {
// This call to setState tells the Flutter framework that something has
// changed in this State, which causes it to rerun the build method below
// so that the display can reflect the updated values. If we changed
// _counter without calling setState(), then the build method would not be
// called again, and so nothing would appear to happen.
_counter = WordPair.random().asPascalCase;
});
}
