Question

我正在使用flutter开发一个应用程序，我想从Firestore提取数据时使用加载屏幕，我以前在setvisibilty的android系统中执行此操作，我是flutter的新手，我不知道该怎么做在堆栈上看到了一些问题，但似乎并没有完全解决问题

如果firebaseuser不是null，我想显示加载屏幕，这是我的initState方法

  void initState() {
    super.initState();
    isRegistered();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        padding: EdgeInsets.all(32),
        child: Form(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text("Login"),
              SizedBox(
                height: 16,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Container(
                    width: 50,
                    child: TextFormField(
                      maxLength: 4,
                      keyboardType: TextInputType.number,
                      controller: countryCodeController,
                      decoration: InputDecoration(
                        hintText: '+251',
                      ),
                    ),
                  ),
                  Container(
                    width: 200,
                    child: TextFormField(
                      maxLength: 9,
                      keyboardType: TextInputType.number,
                      controller: phonenumberController,
                      decoration: InputDecoration(
                        hintText: '912345678',
                      ),
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 16,
              ),
              Container(
                width: double.infinity,
                child: FlatButton(
                    child: Text('Login'),
                    color: Colors.white,
                    padding: EdgeInsets.all(16),
                    onPressed: () {
                      final phoneNumber = countryCodeController.text.trim() + phonenumberController.text.trim();
                      if(phonenumberController.text.trim().length == 9 || countryCodeController.text.trim().length == 4){
                        loginUser(phoneNumber, context);
                      }else{
                        Fluttertoast.showToast(msg: "wronge input");
                      }
                    }),
              )
            ],
          ),
        ),
      ),
    );
  }
  void isRegistered() async{
    FirebaseAuth firebaseAuth = FirebaseAuth.instance;
    final FirebaseUser firebaseUser = await firebaseAuth.currentUser();
    final snapShot = await Firestore.instance.collection("users").document(
        firebaseUser.uid).get();
    if (firebaseUser != null) {
      if (snapShot.exists) {
        Navigator.pushReplacement(
            context,
            MaterialPageRoute(
                builder: (context) => HomePage(
                  firebaseUser: firebaseUser,
                )));
      }else{
      }
    }
  }
}

Answer 1

只需检查一下我为您创建的示例：

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isLoading = false; // This is initially false where no loading state
  List<Timings> timingsList = List();



  @override
  void initState() {
    super.initState();
    dataLoadFunction(); // this function gets called
  }

  dataLoadFunction() async {
    setState(() {
      _isLoading = true; // your loader has started to load
    });
    // fetch you data over here
    setState(() {
      _isLoading = false; // your loder will stop to finish after the data fetch
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: _isLoading
            ? CircularProgressIndicator() // this will show when loading is true
            : Text('You widget tree after loading ...') // this will show when loading is false
      ),
    );
  }
}

让我知道它是否有效

Answer 2

您可以做这样的事情

        class RootScreenSM extends StatefulWidget {
      @override
      _RootScreenSMState createState() => _RootScreenSMState();
    }
    
    class _RootScreenSMState extends State<RootScreenSM> {
      @override
      Widget build(BuildContext context) {
        return StreamBuilder<FirebaseUser>(
          stream: FirebaseAuth.instance.onAuthStateChanged,
          builder: (BuildContext context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return new Container(
                color: Colors.white,
//customize container look and feel here
              );
            } else {
              if (snapshot.hasData) {
                return  HomePage(
                     firebaseUser: snapshot.data,
                    );
              } else {
                return
                    notloggedin();
    
    
    
              }
            }
        

  },
    );
  }

Answer 3

您可以尝试创建这样的小部件，并将其保存为名称 progress.dart

import 'package:flutter/material.dart';

Container circularProgress() {
  return Container(
    alignment: Alignment.center,
    padding: EdgeInsets.only(top: 10.0),
    child: CircularProgressIndicator(
      strokeWidth: 2.0,
      valueColor: AlwaysStoppedAnimation(primaryColor), //any color you want
    ),
  );
}

然后导入progress.dart并创建一个单独的容器

Container loadingScreen() {
    return circularProgress();
  }

然后将您的代码更改为：

        class RootScreenSM extends StatefulWidget {
      @override
      _RootScreenSMState createState() => _RootScreenSMState();
    }
    
    class _RootScreenSMState extends State<RootScreenSM> {
      @override
      Widget build(BuildContext context) {
        return StreamBuilder<FirebaseUser>(
          stream: FirebaseAuth.instance.onAuthStateChanged,
          builder: (BuildContext context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return loadingScreen();  // Container that you just created
            } else {
              if (snapshot.hasData) {
                return  HomePage(
                     firebaseUser: snapshot.data,
                    );
              } else {
                return
                    notloggedin();
    
              }
            }
        },
    );
  }

您可以尝试此方法，并告诉我们是否可行

Answer 4

我将flutter_spinkit用于动画。这里是正在加载的小部件：

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

class Loading extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Center(
        child: SpinKitFadingCube(
          color: Colors.lightGreen[100],
          size: 50.0
        )
      )
    );
  }
}

然后，从您的窗口小部件中，您需要：

import '[yourpath]/loading.dart';

bool loading = false;

@override
  Widget build(BuildContext context) {
    return loading ? Loading() : Scaffold(
      body: Container(...

无论您的点击事件是什么，都应将加载状态设置为TRUE：

setState(() => loading = true)

以及回调在哪里，您应该将状态设置回FALSE：

setState(() => loading = false)

载入画面颤抖

4 个答案: