I have code main.dart like this

home: FutureBuilder(
        future: getIsLogin(),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          if(snapshot.connectionState == ConnectionState.waiting){
            return LoginScreen();
          }
            return LoginScreen();

        },

      )

actually when connection is waiting I want to show splash, but because I have error, so I trying open LoginScreen when connection is waiting or default. in my LoginScreen code I have image and textfield. when app running and still waiting show my LoginScreen without image, when it's done image is show. how to show image when connection still waiting?

(if image is replaced by text it's working while connectionstate is waiting)

this part of my LoginScreen code

return Scaffold(
      appBar: AppBar(
        title: Text("Masuk",
            style: TextStyle(color: Colors.black)),
        backgroundColor: Colors.white,
      ),
      body: Column(
        children: <Widget>[
          Image(
            image: AssetImage("asset/images/banner.jpg"),
            height: 100,
            width: 100,
            fit: BoxFit.fill,
          ),
          SizedBox(
            height: 20,
          ),
          Form(
            key: formKey,
            child: Column(
              children: [
                Padding(
                  //padding: const EdgeInsets.only(left:15.0,right: 15.0,top:0,bottom: 0),
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    controller: TFKdCust,
                    onChanged: (text) {
                      if(formKey.currentState!.validate()){
                        enableButton();
                      }else{
                        disableButton();
                      }
                    },
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Kode Pelanggan',
                        hintText: 'Masukkan Kode Pelanggan Anda'),
                    validator: RequiredValidator(errorText: "Kode Pelanggan tidak boleh kosong"),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(
                      left: 15.0, right: 15.0, top: 15, bottom: 0),
                  child: TextFormField(
                    autovalidateMode: AutovalidateMode.onUserInteraction,
                    controller: TFPassword,
                    onChanged: (text) {
                      if(formKey.currentState!.validate()){
                        enableButton();
                      }else{
                        disableButton();
                      }
                    },
                    obscureText: true,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Kata Sandi',
                        hintText: 'Masukkan Kata Sandi Anda'),
                    validator: RequiredValidator(errorText: "Kata Sandi tidak boleh kosong"),
                  ),
                ),
              ],
            ),
          ),

CodePudding user response：

Define your LoginScreen following way:

class LoginScreen extends StatelessWidget {
  final ConnectionState connectionState;

  const LoginScreen(this.connectionState,);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Masuk",
            style: TextStyle(color: Colors.black)),
        backgroundColor: Colors.white,
      ),
      body: Column(
        children: <Widget>[
          if(connectionState == ConnectionState.waiting) // I am making a check here
          Image(
            image: AssetImage("asset/images/banner.jpg"),
            height: 100,
            width: 100,
            fit: BoxFit.fill,
          ),
        ],

      ),);
  }

and your FutureBuilder following way

FutureBuilder(
      future: getIsLogin(),
      builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) =>
          LoginScreen(snapshot.connectionState),
    );

depending on your connectionState, it will show the image.

CodePudding user response：

I actually did not understand from your explanation.

If you want to show a splash screen during the waiting state then do this:

   home: FutureBuilder( future: getIsLogin(),
   builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) 
   {
        if(snapshot.connectionState == ConnectionState.waiting){
        return SplashScreen();
   } 
   return LoginScreen();
   })

Make a SplashScreen and add the Image you wanna show.

CodePudding user response：

Edited:

You can pass a bool value to the LoginScreen widget. if it is loading set it to true else false.

home: FutureBuilder(
        future: getIsLogin(),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          if(snapshot.hasData){
            return LoginScreen(isLoading: false); // everything is ok!
          } else if(snapshot.hasError){
            return SomeErrorScreen(); // when there is an error
            } else {
            //FutureBuiler has not data, has no error and waiting for the future
            return LoginScreen(isLoading: true);
            }
        },

      )

LoginScreen constructor:

class LoginScreen extends StatefulWidget {
  final bool isLoading;
  const LoginScreen({required this.isLoading});

Then you can check if is it loading show an image else show another image.

 children: <Widget>[
            widget.isLoading ?
            Image(
              image: AssetImage("assets/loading.jpg"),
              height: 100,
              width: 100,
            ) :
            Image(
              image: AssetImage("assets/login.jpg"),
              height: 100,
              width: 100,
            ),

This should work.

Try with delayed future:

home: FutureBuilder(
        future: Future<String>.delayed(
          const Duration(seconds: 5),
          () => 'Data Loaded',
        ),
        builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
          return LoginScreen(state: snapshot.connectionState);
        },
      ),