記事の内容
この記事では、Flutterで処理中にmodalを出す方法を紹介します。
もう少し具体的に言うと、ログインの処理中にグルグルと回っているやつを出す方法を紹介します。
目次 [非表示]
今回、実装する機能
今回、実装する機能は、画面の中心で回っている円です。
これがあることで、ユーザーに、「現在、何らかの処理をやっていること」を伝えることができます。
実装方法
pubspec.yamlにこれを追加します。
modal_progress_hud: ^0.1.3
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: flash_chat | |
| description: A new Flutter application. | |
| version: 1.0.0+1 | |
| environment: | |
| sdk: ">=2.1.0<3.0.0" | |
| dependencies: | |
| flutter: | |
| sdk: flutter | |
| cupertino_icons: ^0.1.2 | |
| animated_text_kit: ^2.0.0 | |
| firebase_core: ^0.4.4+3 | |
| firebase_auth: ^0.16.0 | |
| cloud_firestore: ^0.13.5 | |
| modal_progress_hud: ^0.1.3 | |
| dev_dependencies: | |
| flutter_test: | |
| sdk: flutter | |
| flutter: | |
| uses-material-design: true | |
| assets: | |
| - images/ |
by インポート
import 'package:modal_progress_hud/modal_progress_hud.dart';
bodyをラップして、オプションを追加します。
body: ModalProgressHUD(
inAsyncCall: showSpinner,
inAsyncCall: showSpinner,
showSpinnerをtrueにすれば、「円」がスピンします。
setState(() {
showSpinner = true;
});
showSpinner = true;
});
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'dart:io'; | |
| import 'package:firebase_auth/firebase_auth.dart'; | |
| import 'package:flash_chat/components/rounded_button.dart'; | |
| import 'package:flash_chat/constants.dart'; | |
| import 'package:flash_chat/screens/chat_screen.dart'; | |
| import 'package:flutter/material.dart'; | |
| import 'package:modal_progress_hud/modal_progress_hud.dart'; | |
| class LoginScreen extends StatefulWidget { | |
| static const String id = 'login_screen'; | |
| @override | |
| _LoginScreenState createState() => _LoginScreenState(); | |
| } | |
| class _LoginScreenState extends State<LoginScreen> { | |
| final _auth = FirebaseAuth.instance; | |
| bool showSpinner = false; | |
| String email; | |
| String password; | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| backgroundColor: Colors.white, | |
| body: ModalProgressHUD( | |
| inAsyncCall: showSpinner, | |
| child: Padding( | |
| padding: EdgeInsets.symmetric(horizontal: 24.0), | |
| child: Column( | |
| mainAxisAlignment: MainAxisAlignment.center, | |
| crossAxisAlignment: CrossAxisAlignment.stretch, | |
| children: <Widget>[ | |
| Hero( | |
| tag: 'logo', | |
| child: Container( | |
| height: 200.0, | |
| child: Image.asset('images/logo.png'), | |
| ), | |
| ), | |
| SizedBox( | |
| height: 48.0, | |
| ), | |
| TextField( | |
| keyboardType: TextInputType.emailAddress, | |
| textAlign: TextAlign.center, | |
| onChanged: (value) { | |
| email = value; | |
| //Do something with the user input. | |
| }, | |
| decoration: | |
| kTextFieldDecoration.copyWith(hintText: 'Enter your email'), | |
| ), | |
| SizedBox( | |
| height: 8.0, | |
| ), | |
| TextField( | |
| textAlign: TextAlign.center, | |
| obscureText: true, | |
| onChanged: (value) { | |
| password = value; | |
| //Do something with the user input. | |
| }, | |
| decoration: kTextFieldDecoration.copyWith( | |
| hintText: 'Enter your password'), | |
| ), | |
| SizedBox( | |
| height: 24.0, | |
| ), | |
| RoundedButton( | |
| color: Colors.lightBlueAccent, | |
| title: 'Log In', | |
| onPressed: () async { | |
| setState(() { | |
| showSpinner = true; | |
| }); | |
| try { | |
| final user = await _auth.signInWithEmailAndPassword( | |
| email: email, password: password); | |
| if (user != null) { | |
| Duration threeSeconds = Duration(seconds: 3); | |
| sleep(threeSeconds); | |
| Navigator.pushNamed(context, ChatScreen.id); | |
| } | |
| setState(() { | |
| showSpinner = false; | |
| }); | |
| } catch (e) { | |
| print(e); | |
| } | |
| }, | |
| ), | |
| ], | |
| ), | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
