Flutter

Flutter

Dart |

link

link

• https://flutter.dev/

SDK

• https://api.flutter.dev/index.html

Widget

• https://flutter.dev/docs/development/ui/widgets

拡張パッケージ

• https://pub.dev/flutter/packages

Flutter Studio

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

• https://flutterstudio.app/

Install

Mac

• https://flutter.dev/docs/get-started/install/macos

開発者登録

• https://developer.apple.com/

インストール

1. sdkダウンロード
2. unzipで解凍
3. .bash_profile にPATH登録
4. flutter doctor コマンドで必要な作業のチェックとヘルプ

実行

1. xcodeのダウンロード
2. command line tools の有効化
   1. sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer/
   2. sudo xcodebuild -runFirstLaunch
3. cocoapods のインストール
   1. sudo gem install cocoapods
   2. pod setup
4. シミュレーターの起動
   1. open - a Simulator
5. プロジェクトの作成
   1. flutter create my_app
6. プロジェクトディレクトリで、
   1. flutter run

Firebase

1. プロジェクトフォルダで以下を実行しXcodeで
   1. open ios/Runner.xcworkspace

1. 1. Firebase にバンドルIDを登録
   2. cd ios
   3. pod setup
2. https://developers.google.com/identity/sign-in/ios/start-integrating

[✗] Xcode - develop for iOS and macOS

   ✗ Xcode installation is incomplete; a full installation is necessary for iOS development.
     Download at: https://developer.apple.com/xcode/download/
     Or install Xcode via the App Store.
     Once installed, run:
       sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
       sudo xcodebuild -runFirstLaunch
   ✗ CocoaPods not installed.
       CocoaPods is used to retrieve the iOS and macOS platform side's plugin code that responds to your plugin usage on the Dart side.
       Without CocoaPods, plugins will not work on iOS or macOS.
       For more info, see https://flutter.dev/platform-plugins
     To install:
       sudo gem install cocoapods

環境構築

• https://www.typea.info/blog/index.php/2019/10/03/xamarin_flutter/

Firebase

Flutterfire

• https://github.com/FirebaseExtended/flutterfire

Firebase Auth

• https://pub.dev/packages/firebase_auth

example

• https://github.com/FirebaseExtended/flutterfire/tree/master/packages/firebase_auth/example

Google Sign in

• https://pub.dev/packages/google_sign_in

example

• https://github.com/flutter/plugins/blob/master/packages/google_sign_in/example/lib/main.dart

Tips

• Flutter コードサンプル

AndroidX対応

• AndriodX対応

メニュー

ドロワーメニュー

• https://flutter.dev/docs/cookbook/design/drawer

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

• Dialog

画像選択

• 画像選択

画像切り抜き

• 画像切り抜き

DB

Sqlite

• https://flutter.ctrnost.com/logic/sqlite/
• sqfliteパッケージの利用