Flutter Stack Widget Center Items Alignment

If you have a lot of children inside stack widget, and you all of them to start from the center of the parent widget of stack widget, then you alignment property for it.

Inside a parent widget below is our stack widget

Stack(

                      children: [
                        Center(
                          child: SizedBox(
                            height: 220,
                            width: 220,
                            child: CircularProgressIndicator(
                              valueColor: AlwaysStoppedAnimation<Color>(
                                stats['isPrelude']?Colors.red:Colors.blue
                              ),
                              strokeWidth: 25,
                              value: stats['exerciseProgress'],
                            ),
                          ),
                        ),
                        Center(
                          child: SizedBox(
                            height: 300,
                            width: 300,
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 20),
                              child: Image.asset('stopwatch.png'),
                            ),
                          ),
                        ),
                        Center(child: CircularProgressIndicator())
                      ],
                    )

As you can see everything is messed up here. But we want everything starts from the center of the parent widget.

So we will add the below property .

 alignment: const Alignment(0, 0),

Stack(
                      alignment: const Alignment(0, 0),

                      children: [
                        Center(
                          child: SizedBox(
                            height: 220,
                            width: 220,
                            child: CircularProgressIndicator(
                              valueColor: AlwaysStoppedAnimation<Color>(
                                stats['isPrelude']?Colors.red:Colors.blue
                              ),
                              strokeWidth: 25,
                              value: stats['exerciseProgress'],
                            ),
                          ),
                        ),
                        Center(
                          child: SizedBox(
                            height: 300,
                            width: 300,
                            child: Padding(
                              padding: const EdgeInsets.only(bottom: 20),
                              child: Image.asset('stopwatch.png'),
                            ),
                          ),
                        ),
                        Center(child: CircularProgressIndicator())
                      ],
                    )