skip to Main Content

I am trying to add a progress dialog when tapping on my button.

Below is my code:

Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: Center(child: Text('Login')),
        backgroundColor: const Color(0xff2e80e4)
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(top: 60.0),
              child: Center(
                child: Container(
                  width: 200,
                  height: 150,
                  child: Image.asset('assets/logo.jpg'),
                ),
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(horizontal: 15),
              child: TextField(
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Username',
                  hintText: 'Please enter your username'
                ),
              ),
            ),
            Padding(
              padding: const EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0, bottom: 0),
              child: TextField(
                obscureText: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Password',
                  hintText: 'Please enter your password'
                ),
              ),
            ),
            TextButton(
                onPressed: () async{
                  await Navigator.pushNamed(context, '/forget_password');
                },
                child: Text(
                  'Forget Password',
                  style: TextStyle(color: const Color(0xff2e80e4), fontSize: 15.0),
                ),
            ),
            Container(
              height: 50.0,
                width: 250.0,
              decoration: BoxDecoration(
                color: const Color(0xff2e80e4),
                borderRadius: BorderRadius.circular(20.0)
              ),
              child: TextButton(
                onPressed: () async{
                 //here I need to start the progress dialog
                  http.Response response = await postRequest();
                  Map<String, dynamic> parsedData = jsonDecode(response.body);
                  LoginResponse loginResponse = LoginResponse.fromJson(parsedData);
                  if(loginResponse.verificationStatus)
                  {
                    await Navigator.pushNamed(context, '/home');
                  }
                  //Here I need to stop the progress dialog
                },
                child: Text(
                  'Login',
                  style: TextStyle(color: Colors.white, fontSize: 25.0),
                ),
              ),
            ),

            SizedBox(height: 100.0),
            TextButton(
              onPressed: () async{
                await Navigator.pushNamed(context, '/sign_up');
              },
                child: Text(
                    'New User? Create Account',
                  style: TextStyle(color: const Color(0xff2e80e4), fontSize: 15.0),
                ),
            )
          ],
        ),
      ),
    );
  }

I like to start the progress dialog when I tap on the login button and stop it after loading home page. Is it possible to use flutter_spinkit for this? I tried, but no progres, I am very new to flutter!

2

Answers


  1. You can manage it using state as updating state rerender your widget and show content according to your condition . Kindly find below updated code and let us know if something is missed over here

    Note :- I am assuming over here that your widget is extending StatefulWidget not StatelessWidget as you added build method only

    Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.white,
          appBar: AppBar(
              title: Center(child: Text('Login')),
              backgroundColor: const Color(0xff2e80e4)
          ),
          body: _isLoading ? const Center(child: CircularProgressIndicator(),) : SingleChildScrollView(
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.only(top: 60.0),
                  child: Center(
                    child: Container(
                      width: 200,
                      height: 150,
                      child: Image.asset('assets/logo.jpg'),
                    ),
                  ),
                ),
                Padding(
                  padding: EdgeInsets.symmetric(horizontal: 15),
                  child: TextField(
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Username',
                        hintText: 'Please enter your username'
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.only(left: 15.0, right: 15.0, top: 15.0, bottom: 0),
                  child: TextField(
                    obscureText: true,
                    decoration: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: 'Password',
                        hintText: 'Please enter your password'
                    ),
                  ),
                ),
                TextButton(
                  onPressed: () async{
                    await Navigator.pushNamed(context, '/forget_password');
                  },
                  child: Text(
                    'Forget Password',
                    style: TextStyle(color: const Color(0xff2e80e4), fontSize: 15.0),
                  ),
                ),
                Container(
                  height: 50.0,
                  width: 250.0,
                  decoration: BoxDecoration(
                      color: const Color(0xff2e80e4),
                      borderRadius: BorderRadius.circular(20.0)
                  ),
                  child: TextButton(
                    onPressed: () async{
                      setState(() {
                        _isLoading = true;
                      });
                      //here I need to start the progress dialog
                      http.Response response = await postRequest();
                      Map<String, dynamic> parsedData = jsonDecode(response.body);
                      LoginResponse loginResponse = LoginResponse.fromJson(parsedData);
                      if(loginResponse.verificationStatus)
                      {
                        setState(() {
                          _isLoading = false;
                        });
                        await Navigator.pushNamed(context, '/home');
                      }
                      //Here I need to stop the progress dialog
                    },
                    child: Text(
                      'Login',
                      style: TextStyle(color: Colors.white, fontSize: 25.0),
                    ),
                  ),
                ),
    
                SizedBox(height: 100.0),
                TextButton(
                  onPressed: () async{
                    await Navigator.pushNamed(context, '/sign_up');
                  },
                  child: Text(
                    'New User? Create Account',
                    style: TextStyle(color: const Color(0xff2e80e4), fontSize: 15.0),
                  ),
                )
              ],
            ),
          ),
        );
      }
    

    As you mentioned that you are beginner , I would like to suggest to go through State management in flutter as it will help you to do many things

    https://docs.flutter.dev/ui/interactive

    Login or Signup to reply.
  2. Answering your question in the answer above (Don’t have reputation to comment):
    You can use Stack Widget to stack children widgets on top of one another. Return Sizebox.shrink() for an empty widget.

    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
          title: Center(child: Text('Login')),
          backgroundColor: const Color(0xff2e80e4)
      ),
      body: Stack(children: [
          _isLoading ? const Center(child: CircularProgressIndicator(),) : SizedBox.shrink(),
          YourSingleChildScrollView
          ])
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search