Flutter "CircularProgressIndicator" widgets breaks widgets alignement-CodePudding

I'm currently building a scrapping a scrapping application using flutter.

I encounter a problem when I try to display a loader while scrapping, the apparition of the loader seems to totally break the Cross Axis Alignement of my Columns.

First my application looks like this :

https://i.stack.imgur.com/6Tbz7.png

Then, when I hit "scrap button", I update my state in order to display a loader, and this happens :

https://i.stack.imgur.com/0MIi6.png

Here are the two pieces of code rendering the application :

My main class rendering a Flutter logo & my main widget

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            FlutterLogo(
              size: 400,
              style: FlutterLogoStyle.horizontal,
            ),
            ScrapBody(),
          ],
        ),
      ),
    );
  }
}

My main Widget containing rendering management logic as follow

Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
        ScrapForm(
          scrap: scrap,
          exportToCsv: exportToCsv,
          isScrapSuccess: isScrapSuccess,
        ),
        isLoading
            // ? Container()
            ? Column(
                children: [
                  CircularProgressIndicator(),
                  Text(
                    "Scrapping page ${pageScrapIndex.toString()} on ${totalPages.toString()}",
                  ),
                ],
              )
            : Column(
                children: [
                  ScrapResult(
                    reviewerListResult: reviewerList,
                  ),
                ],
              ),
      ],
    );
  }

As you can see, I tried to constraint the widgets that composes my Column with " crossAxisAlignment: CrossAxisAlignment.center" in both parts, but it doesn't work, the widgets keeps goes on the left when I render my loader, and only when I render my loader.

After many searches about the Circuler loader and a look in the widget core,I didn't find anything that could explain my case, any help would be so appreciated, thanks in advance.

CodePudding user response：

try to wrap your base column with Container and give it's width as double.infinity. and also add crossAxisAlignment: CrossAxisAlignment.center for your circular progress dialog's Column