Question 229663 in Flutter Question posted in
The official Flutter documentation can be found here.

CircularProgress Indicator in flutter applied in Elevated button?

I want to add elevated with circularprogressIndicator

I want to add this circular Progress Indicator in my sign up option this is my container for sign up option

Container(
        height: 45,
        width: double.infinity,
        decoration: const ShapeDecoration(
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.all(Radius.circular(4)))),
        child: ElevatedButton(
          onPressed: ()   async {
            String res = await AuthMethods().signUpUser(
                email: _emailController.text,
                password: _passwordController.text,
                username: _usernameController.text,
                bio: _bioController.text,
                file: _image!);
            print(res);
          },
          child:  Text("Sign up"),
        ),
      ),

where should i add circular Progress indicator this is code for "_isLoading
? const Center(
child: CircularProgressIndicator(
color: Colors.white,
),
)
:"
So when i click on sign up button it run as circularprogressIndicator on it .

Tags:

2

Answers


  1. 0

    Use Async Button :

    dependencies:
  async_button_builder: ^3.0.0+1

    Example:

    AsyncButtonBuilder(
  child: Text('Click Me'),
  onPressed: () async {
    await Future.delayed(Duration(seconds: 1));
  },
  builder: (context, child, callback, _) {
    return TextButton(
      child: child,
      onPressed: callback,
    );
  },
),
    Login or Signup to reply.
  2. 0

    We can display a circular progress indicator when the signup process is ongoing.

    bool _isLoading = false; // Define this boolean to track loading state

Container(
  height: 45,
  width: double.infinity,
  decoration: const ShapeDecoration(
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.all(Radius.circular(4)),
    ),
  ),
  child: _isLoading
      ? Center(
          child: CircularProgressIndicator(
            color: Colors.white,
          ),
        )
      : ElevatedButton(
          onPressed: () async {
            setState(() {
              _isLoading = true; // Set loading state to true
            });

            String res = await AuthMethods().signUpUser(
              email: _emailController.text,
              password: _passwordController.text,
              username: _usernameController.text,
              bio: _bioController.text,
              file: _image!,
            );
            
            print(res);

            setState(() {
              _isLoading = false; // Set loading state to false when signup is complete
            });
          },
          child: Text("Sign up"),
        ),
)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search