Zenn
📱

【Flutter】アイコンとユーザー名を載せたシンプルなDrawerの作り方

2023/06/03に公開
Firebase
Flutter
Dart
drawer
tech

はじめに

Drawerは割と幅広く使用できることがあるんじゃないかと思います。
今回はFirebaseのGoogleログインと合わせた、シンプルで使いやすいDrawerの作り方を自身のアウトプットも兼ねて書き残しておきます。

完成イメージ

準備

FirebaseのAuthenticationを使用してGoogleログインをするため、この記事での詳しい説明は省きますが、事前に連携しておきましょう。
※今回はFlutterFire CLIを使用しました

全体のコード

main.dartでは、Firebaseの初期化をしつつ、GoogleSignin()を呼んでいます。

main.dart
import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/material.dart';
import 'firebase_options.dart';
import 'google_signin.dart';

void main() async{
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Drawer_auth',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: GoogleSignin(),
    );
  }
}

次にgoogle_signin.dartでは、サインインが成功した後にDrawerScreenへと画面遷移します。

google_signin.dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:google_sign_in/google_sign_in.dart';
import 'drawer.dart';

class GoogleSignin extends StatelessWidget {
  const GoogleSignin({Key? key}) : super(key: key);

  Future<void> signInWithGoogle(BuildContext context) async {
    final GoogleSignInAccount? googleUser = await GoogleSignIn().signIn();
    final GoogleSignInAuthentication? googleAuth =
        await googleUser?.authentication;

    final credential = GoogleAuthProvider.credential(
      accessToken: googleAuth?.accessToken,
      idToken: googleAuth?.idToken,
    );

    try {
      final UserCredential userCredential =
          await FirebaseAuth.instance.signInWithCredential(credential);

      // サインインが成功した後に画面遷移する
      if (userCredential.user != null) {
        Navigator.push(
          context,
          MaterialPageRoute(builder: (context) => DrawerScreen()),
        );
      }
    } catch (e) {
      // サインインが失敗した場合のエラーハンドリング
      print('Sign in with Google failed: $e');
      // エラーの表示など、適切な処理を行ってください
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Google Login')),
      body: Center(
        child: Column(
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                signInWithGoogle(context);
              },
              child: const Text('Google'),
            ),
          ],
        ),
      ),
    );
  }
}

最後に、「FirebaseAuth.instance.currentUser」から取得したアイコンとユーザー名をDrawerに表示しています。

drawer.dart
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';

class DrawerScreen extends StatefulWidget {
  @override
  _DrawerScreenState createState() => _DrawerScreenState();
}

class _DrawerScreenState extends State<DrawerScreen> {
  User? _user;

  @override
  void initState() {
    super.initState();
    _getUser();
  }

  void _getUser() {
    final user = FirebaseAuth.instance.currentUser;
    setState(() {
      _user = user;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Drawer'),
      ),
      drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            Container(
              height: 200,
              child: DrawerHeader(
                decoration: BoxDecoration(
                  color: Colors.blue,
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    CircleAvatar(
                      backgroundImage: NetworkImage(_user?.photoURL ?? ''),
                      radius: 35,
                    ),
                    SizedBox(height: 5),
                    Text(
                      _user?.displayName ?? 'Guest',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ],
                ),
              ),
            ),
            ListTile(
              leading: Icon(Icons.account_circle),
              title: Text('Profile'),
              onTap: (){
                //ここにTap時のコードを書く
              },
            ),
            ListTile(
              leading: Icon(Icons.settings),
              title: Text('Settings'),
              onTap: (){
                //ここにTap時のコードを書く
              },
            ),
          ],
        ),
      ),
    );
  }
}

最後に

今回はシンプルなDrawerの実装方法について書き残しておきました。
こんなに簡単にそれっぽいデザインのナビゲーションが作れてしまいました！
説明を省いたFlutterFire CLIでの導入方法についても近々記事を書いてアウトプットしていきたいと思います。

最後までご覧頂き、ありがとうございました。

お世話になっているコミュニティ

https://flutteruniv.com/
https://galirage.com/

Discussion