「Flutter」の版間の差分
タグ: モバイルウェブ編集 モバイル編集 |
タグ: モバイルウェブ編集 モバイル編集 |
||
115行目: | 115行目: | ||
==Widget== | ==Widget== | ||
+ | ===Layout=== | ||
+ | *[https://medium.com/flutter-community/flutter-layout-cheat-sheet-5363348d037e Cheat Sheet] | ||
+ | |||
===LayoutBuilder=== | ===LayoutBuilder=== | ||
*https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html | *https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html | ||
*[https://www.youtube.com/watch?v=IYDVcriKjsw Movie] | *[https://www.youtube.com/watch?v=IYDVcriKjsw Movie] | ||
− | |||
==[[Tips]]== | ==[[Tips]]== |
2020年4月18日 (土) 13:47時点における版
Flutter
Dart |
SDK
Widget
拡張パッケージ
Flutter Studio
UIをデザイナで作成できる
Install
Mac
開発者登録
Flutter SDK インストール
- sdkダウンロード
- unzipで解凍
- ユーザーホームディレクトリ/opt/flutter
- .bash_profile にPATH登録
- export PATH="~/opt/flutter/bin:$PATH"
- flutter doctor コマンドで必要な作業のチェックとヘルプ
$ flutter --version Flutter 1.12.13+hotfix.8 • channel stable • https://github.com/flutter/flutter.git Framework • revision 0b8abb4724 (9 weeks ago) • 2020-02-11 11:44:36 -0800 Engine • revision e1e6ced81d Tools • Dart 2.7.0 delhi:~ hirotoyagi$ flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, v1.12.13+hotfix.8, on Mac OS X 10.15.3 19D76, locale ja-JP) [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3) [✓] Xcode - develop for iOS and macOS (Xcode 11.4) [✓] Android Studio (version 3.6) [✓] VS Code (version 1.43.2) [!] Connected device ! No devices available ! Doctor found issues in 1 category.
Xcode設定
- xcodeのダウンロード
- command line tools の有効化
- sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/
- sudo xcodebuild -runFirstLaunch
- cocoapods のインストール
- sudo gem install cocoapods
- pod setup
- シミュレーターの起動
- open - a Simulator
- プロジェクトの作成
- flutter create my_app
- プロジェクトディレクトリで、
- flutter run
プロジェクトにFirebaseを統合
- プロジェクトフォルダで以下を実行しXcodeで
- open ios/Runner.xcworkspace
- 開発者IDを登録
- Firebase にバンドルIDを登録
- cd ios
- pod init
- https://developers.google.com/identity/sign-in/ios/start-integrating
- iPhoneでデベロッパーを信頼
- 「設定」>「一般」>「プロファイル」または「プロファイルとデバイス管理」の順にタップします。 「エンタープライズ App」見出しの下に、該当する開発元のプロファイルが表示されます。 「エンタープライズ App」見出しの下で開発元のプロファイルの名前をタップし、その開発元を信頼するように設定
- FirebaseをiOSに追加する
Integrating client project Pod installation complete! There is 1 dependency from the Podfile and 4 total pods installed.
[!] Automatically assigning platform `iOS` with version `8.0` on target `Runner` because no platform was specified. Please specify a platform for this target in your Podfile. See `https://guides.cocoapods.org/syntax/podfile.html#platform`.
[!] CocoaPods did not set the base configuration of your project because your project already has a custom config set. In order for CocoaPods integration to work at all, please either set the base configurations of the target `Runner` to `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` or include the `Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig` in your build configuration (`Flutter/Release.xcconfig`). delhi:ios hirotoyagi$
環境構築
Firebase
Flutter.dev 公式プラグイン
Flutterfire
- https://github.com/FirebaseExtended/flutterfire
Firebase Auth
example
- https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/example
Google Sign in
example
Widget
Layout
LayoutBuilder
Tips
AndroidX対応
メニュー
ドロワーメニュー
return Scaffold( appBar: AppBar(), drawer: Drawer(), body: Center(), );
画面遷移
呼び出し元
RaisedButton( onPressed: (){ Navigator.push( context, MaterialPageRoute(builder: (context) => SecondRoute()), ); }, child: const Text('Open Second Screen'),
呼び出し先
import 'package:flutter/material.dart'; class SecondRoute extends StatefulWidget { @override State<StatefulWidget> createState() { return _SecondRouted(); } } class _SecondRouted extends State<SecondRoute> { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(), body: Center(), ); } }
Dialog
画像選択
画像切り抜き
DB
Sqlite
© 2006 矢木浩人