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

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

• 開発者IDを登録

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

環境構築

• 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パッケージの利用