| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「Flutter」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
32行目: 32行目:
 
## export PATH="~/opt/flutter/bin:$PATH"
 
## export PATH="~/opt/flutter/bin:$PATH"
 
#flutter doctor コマンドで必要な作業のチェックとヘルプ
 
#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設定====

2020年4月14日 (火) 13:53時点における版

Flutter

Dart |


SDK

Widget

拡張パッケージ

Flutter Studio

UIをデザイナで作成できる

Install

Mac

開発者登録

Flutter SDK インストール

  1. sdkダウンロード
  2. unzipで解凍
    1. ユーザーホームディレクトリ/opt/flutter
  3. .bash_profile にPATH登録
    1. export PATH="~/opt/flutter/bin:$PATH"
  4. 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で
  • 開発者IDを登録

0512 ios bundle id2.png Flutter xcode sign.png

Flutter pod google signin.png

  • iPhoneでデベロッパーを信頼
    • 「設定」>「一般」>「プロファイル」または「プロファイルとデバイス管理」の順にタップします。 「エンタープライズ App」見出しの下に、該当する開発元のプロファイルが表示されます。 「エンタープライズ App」見出しの下で開発元のプロファイルの名前をタップし、その開発元を信頼するように設定

Ios firebase.png Firebase sdk.png Google service info plist.png 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

Flutterfire

Firebase Auth

example

Google Sign in

example

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