CircularProgressIndicator not showing on button press in bottom sheet

Question

I am showing bottom sheet on a button tap. The bottom sheet contains a button. On that press of button I change the state of _isButtonPressed variable which is of type bool. Now I want to show CircularProgreesIndicator which is not happening. But the bottom sheet pops after 5 seconds. What am I doing wrong?

showModalBottomSheet<dynamic>(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(
                  topLeft: const Radius.circular(20.0),
                  topRight: const Radius.circular(20.0),
                )),
                isScrollControlled: true,
                context: context,
                builder: (BuildContext context) {
                  return Wrap(children: [
                    Column(
                      children: [
                        !_isButtonPressed
                            ? FlatButton(
                                onPressed: () async {
                                  setState(() {
                                    _isButtonPressed = true;
                                  });
                                  await Future.delayed(Duration(seconds: 5));
                                  setState(() {
                                    _isButtonPressed = false;
                                  });
                                  Navigator.pop(context);
                                },
                                child: Row(
                                  children: [
                                    Icon(Icons.share),
                                    SizedBox(
                                      width: 12.0,
                                    ),
                                    Text('Share'),
                                  ],
                                ))
                            : Row(
                                children: [
                                  Icon(Icons.share),
                                  SizedBox(
                                    width: 12.0,
                                  ),
                                  CircularProgressIndicator(
                                    strokeWidth: 3.0,
                                  ),
                                ],
                              ),],),],);)

Update: Here is complete code to test.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Bottom sheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isButtonPressed;
  @override
  void initState() {
    super.initState();
    _isButtonPressed = false;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (BuildContext bc) {
                return Container(
                  child: Wrap(
                    children: <Widget>[
                      !_isButtonPressed
                          ? FlatButton(
                              onPressed: () async {
                                setState(() {
                                  _isButtonPressed = true;
                                });
                                print(_isButtonPressed);
                                await Future.delayed(Duration(seconds: 5));
                                setState(() {
                                  _isButtonPressed = false;
                                });
                                Navigator.pop(context);
                              },
                              child: Row(
                                children: [
                                  Icon(Icons.share),
                                  SizedBox(
                                    width: 12.0,
                                  ),
                                  !_isButtonPressed
                                      ? Text('Share')
                                      : Text('Wait'),
                                ],
                              ))
                          : Row(
                              children: [
                                Icon(Icons.share),
                                SizedBox(
                                  width: 12.0,
                                ),
                                CircularProgressIndicator(
                                  strokeWidth: 3.0,
                                ),
                              ],
                            ),
                    ],
                  ),
                );
              });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

score 1 · Answer 1 · answered Nov 22 '20 at 17:03

I have found the answer. I just wrapped the Container inside StatefulBuilder. Please see the comment inside the code.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Bottom sheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet(
              context: context,
              builder: (BuildContext bc) {
                bool _isButtonPressed = false;

// Here wrap the container inside StatefulBuilder.

                return StatefulBuilder(builder: (context, setState) {
                  return Container(
                    child: Wrap(
                      children: <Widget>[
                        !_isButtonPressed
                            ? FlatButton(
                                onPressed: () async {
                                  setState(() {
                                    _isButtonPressed = true;
                                  });
                                  print(_isButtonPressed);
                                  await Future.delayed(Duration(seconds: 5));
                                  setState(() {
                                    _isButtonPressed = false;
                                  });
                                  Navigator.pop(context);
                                },
                                child: Row(
                                  children: [
                                    Icon(Icons.share),
                                    SizedBox(
                                      width: 12.0,
                                    ),
                                    !_isButtonPressed
                                        ? Text('Share')
                                        : Text('Wait'),
                                  ],
                                ))
                            : Row(
                                children: [
                                  Icon(Icons.share),
                                  SizedBox(
                                    width: 12.0,
                                  ),
                                  CircularProgressIndicator(
                                    strokeWidth: 3.0,
                                  ),
                                ],
                              ),
                      ],
                    ),
                  );
                });
              });
        },
        child: Icon(Icons.add),
      ),
    );
  }
}

score 0 · Answer 2 · answered Nov 22 '20 at 16:39

0

@Arun try wrapping bottomSheet widget with stateful widget... this worked for me, hope it work for u

answered Nov 22 '20 at 16:39

Paul Edem'kong

58
4

I don't understand. Please be more specific. – Arun Nov 22 '20 at 16:49

score 0 · Answer 3 · answered Nov 22 '20 at 18:18

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Bottom sheet'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          showModalBottomSheet(
           context: context,
              builder: (BuildContext bc) {
               

// Here wrap the container inside StatefulBuilder.

                return BottomSheet();});
             
        },
          
        
        child: Icon(Icons.add),
      ),
    );
  }
}

class BottomSheet extends StatefulWidget {
  BottomSheet({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _BottomSheetState createState() => _BottomSheetState();
}

class _BottomSheetState extends State<BottomSheet> {
   bool isButtonPressed = false;
  @override
  Widget build(BuildContext context) {
    return Container(
                   child: Wrap(
                      children: <Widget>[
                        !isButtonPressed
                            ? FlatButton(
                                onPressed: () async {
                                  setState(() {
                                    isButtonPressed = true;
                                  });
                                  await Future.delayed(Duration(seconds: 5));
                                  setState(() {
                                    isButtonPressed = false;
                                  });
                                  Navigator.pop(context);
                                },
                                child: Row(
                                  children: [
                                    Icon(Icons.share),
                                    SizedBox(
                                      width: 12.0,
                                    ),
                                    !isButtonPressed
                                        ? Text('Share')
                                        : Text('Wait'),
                                  ],
                                ))
                            : Row(
                                children: [
                                  Icon(Icons.share),
                                  SizedBox(
                                    width: 12.0,
                                  ),
                                  CircularProgressIndicator(
                                    strokeWidth: 3.0,
                                  ),
                                ],
                              ),
                      ],
                    ),
               
      );
  }
}

> Blockquote

score 0 · Answer 4 · answered Nov 22 '20 at 19:12

0

you need to use scaffold state to change state of bottom sheet

see this solution

answered Nov 22 '20 at 19:12

Yahya Nasser Al-weshly

101
6

CircularProgressIndicator not showing on button press in bottom sheet

4 Answers4