Closed13

flutter奮闘記

yuiyui

Android Studioからflutterアプリを作っていく

New Flutter Projectをクリック、サイドバーからFlutterを選択してパスを通す

名前を変更してCreate

あとでハイフンはflutterの命名ルールに反してるとエラーがでたのでアンスコに変えた

yuiyui

Project Locationの設定を忘れてた。
個人アプリたちをまとめてるリポジトリがあるのでそこに移動&&githubにもついでにpushする

yuiyui

https://www.flutter-study.dev/todo-app/about-todo-app のとおりに作っていくぞ

よくわかんないけどバージョン?の問題かkeyが推奨になったらしい

https://dart-lang.github.io/linter/lints/use_key_in_widget_constructors.html

というわけでmain.dartは以下のようになった

main.dart
import 'package:flutter/material.dart';

void main() {
  runApp(const MyTodoApp());
}

class MyTodoApp extends StatelessWidget {
  const MyTodoApp({Key? key}) : super(key: key);
  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter TODO App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      // リスト一覧画面を表示
      home: const TodoListPage(),
    );
  }
}

class TodoListPage extends StatelessWidget {
  const TodoListPage({Key? key}) : super(key: key);
  
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text('test'),
      ),
    );
  }
}

yuiyui

あとconstアサーションも推奨になったのかAndroid Studioでwarningが出るので対応した

yuiyui

画面遷移までできた

Image from Gyazo

constの使い方がわからんくて少し手間取ったけど基本クリックイベントでなにか変更するとかはconstじゃないのね(それはそう)

yuiyui

widgetの使い方はなんとなくわかったのでgoogleログイン実装する

yuiyui
flutter pub add google_sign_in
flutter pub add firebase_core 
flutter pub add firebase_auth

本質じゃないけどnpmみたいにまとめてインポートさせてほしいわね
yarn add xxx yyy zzzのように書きたい

yuiyui

pubspec.yamlに追加されてることを確認!

  google_sign_in: ^5.3.1
  firebase_core: ^1.17.0
  firebase_auth: ^3.3.18

いい感じ。
必要なファイルたちを取りに行く〜

ざっくり手順を調べると以下のような感じらしい

google login (iOS)の実装方法

  • GoogleService-Info.plistをダウンロード
  • ios/Runner 配下に入れる
  • Info.plistにREVERSED_CLIENT_IDを追加
  • firebaseの初期化ファイルを作成

google login (android)の実装方法

  • google-services.jsonファイルをダウンロードし、android/app配下に置くだけ
  • あとの手順は上記のfirebaseの初期化〜以降同じ手順
yuiyui

Info.plistに以下追加までできた
https://pub.dev/packages/google_sign_in

<!-- Put me in the [my_project]/ios/Runner/Info.plist file -->
<!-- Google Sign-in Section -->
<key>CFBundleURLTypes</key>
<array>
	<dict>
		<key>CFBundleTypeRole</key>
		<string>Editor</string>
		<key>CFBundleURLSchemes</key>
		<array>
			<!-- TODO Replace this value: -->
			<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
			<string>com.googleusercontent.apps.861823949799-vc35cprkp249096uujjn0vvnmcvjppkn</string>
		</array>
	</dict>
</array>
<!-- End of the Google Sign-in Section -->
yuiyui

main.dartでfirebaseの初期化

main.dart
Future<void> main() async {
~~~
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
このスクラップは2022/09/21にクローズされました