![[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
チェック（１） †以下のCommandを実行し、TODOを確認する。 >flutter doctor Android Studioのインストール †
プラグインのインストール †「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のパス変更 †SDKのパスを変更する場合、以下の手順に従って変更する。
サンプルの生成と実行 †新規作成プロジェクト †Android Studioで、新規作成プロジェクトする。
デバッグ実行 †
プロジェクトの開発 †以降の手順で説明する。 デバッグ実行 †Android Studioで1GB、エミュレータで6GB程、メモリを消費するので、 エミュレータを登録して実行 †
実機でデバッグ実行する場合 †
Flutter Devtoolsを利用する。 †
その他のツールを利用する。 †
手順２：イベントを実装する。 †ボタンのWidget †
RaisedButton? †
RaisedButton(
child: const Text('Button'),
color: Colors.orange,
textColor: Colors.white,
onPressed: () {},
),
ElevatedButton? †onPressedに、任意のメソッドを書く。 ElevatedButton(
child: const Text('Button'),
style: ElevatedButton.styleFrom(
primary: Colors.orange,
onPrimary: Colors.white,
),
onPressed: () {},
),
FlatButton? †
FlatButton(
child: const Text('Button'),
textColor: Colors.black,
onPressed: () {},
),
TextButton? †onPressedに、任意のメソッドを書く。 TextButton(
child: const Text('Button'),
style: TextButton.styleFrom(
primary: Colors.black,
),
onPressed: () {},
),
OutlineButton? †
OutlineButton(
child: const Text('Button'),
onPressed: () {},
),
OutlinedButton? †onPressedに、任意のメソッドを書く。 OutlinedButton(
child: const Text('Button'),
style: OutlinedButton.styleFrom(
primary: Colors.black,
),
onPressed: () {},
),
IconButton? †ButtonBar? †FloatingActionButton? †PopupMenuButton? †DropdownButton? †
任意のWidget †ボタンでない、任意のWidgetに、イベントを実装できる。 InkWell? †簡単に、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'))
),
),
),
)
GestureDetector? †InkWellのRipple エフェクトは無いが、 GestureDetector(
// タッチ検出対象のWidget
child: Text(
'How to use GestureDetector',
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
),
// ダブルタップ
onDoubleTap: _incrementCounter
)
参考 †
Qiita †
手順３：画面遷移処理を実装する。 †
API †push †
Navigator.of(context).pop();
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) {
return MyHomePage(title: 'Flutter Demo Home PageA');
},
),
);
pushNamed †
メニュー †AppBar? †
Drawer †
TabBar? †
BottomNavigationBar? †
参考 †
Qiita †
手順４：レイアウトを行う。 †body, children or childと、レイアウトを行う。 Layout系 †Container †
body: Container( ... child: Column or Row Center †
body: Center( ... child: Column or Row その他 †Multi Layout系 †Colmn †
body: Column(
...
children: <Widget>[
Row(
Row †
body: Row(
...
children: <Widget>[
Column(
その他 †margin/padding †margin、paddingプロパティ †
margin、paddingプロパティが無い場合 †RowやColumnなど、childrenプロパティのあるWidgetは、
AxisAlignment? †内部コンテンツの位置 MainAxisAlignment? †
CrossAxisAlignment? †
参考 †
手順５：パッケージの追加と利用 †english_wordsパッケージの例 †パッケージの追加 †english_wordsパッケージを追加・利用する。
パッケージの利用 †
データの永続化（shared_preferences） †パッケージの追加 †shared_preferencesパッケージを追加する必要がある。
パッケージの利用 †import 'package:shared_preferences/shared_preferences.dart';
Future<SharedPreferences> _prefs = SharedPreferences.getInstance();
late Future<int> _counter;
Future<void> _incrementCounter() async {
final SharedPreferences prefs = await _prefs;
final int counter = (prefs.getInt('counter') ?? 0) + 1;
setState(() {
_counter = prefs.setInt("counter", counter).then((bool success) {
return counter;
});
});
}
@override
void initState() {
super.initState();
_counter = _prefs.then((SharedPreferences prefs) {
return (prefs.getInt('counter') ?? 0);
});
}
参考 †
ブラウザ起動（url_launcher） †パッケージ追加 †url_launcherパッケージを追加する必要がある。
パッケージの利用 †import 'package:url_launcher/url_launcher.dart'; _launchURL() async {
const url = "http://https://www.google.co.jp/";
if (await canLaunch(url)) {
await launch(url);
} else {
throw 'Could not Launch $url';
}
}
参考 †
WebAPIを呼び出す。 †パッケージ追加 †HTTPパッケージを追加する必要がある。
GET †
POST †
その他 †
参考 †
参考 †
Flutterのセカンド・ステップ †参考 † |
FlutterInspector.png