Not sure what is going on here I have mainAxisAlignment: MainAxisAlignment.center, and still not aligning to the vertical center you can see the issue here its pretty fast and I'm talking about the loader not the one for the images

my code

if (value.isLoading) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: loadingWidget(),
            ),
          ],
        );
      }

Here is the full code

return SizedBox(
  width: MediaQuery.of(context).size.width,
  child: Consumer<DogProvider>(
    builder: (context, value, child) {
      if (value.isLoading) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Center(
              child: loadingWidget(),
            ),
          ],
        );
      }
      if (value.dogsList.isEmpty || value.error.isNotEmpty) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Lottie.asset(
              'assets/animations/no-dog-animation.json',
              width: 500,
              height: 250,
            ),
            const Center(
              child: Padding(
                padding: EdgeInsets.fromLTRB(10, 15, 10, 0),
                child: Text(
                  "You haven't added a dog yet!",
                  style: AppStyles.noDataTextStyle,
                ),
              ),
            ),
          ],
        );
      }

      return SizedBox(
        width: double.infinity,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(
                top: 65.0,
                left: 18.0,
                right: 18.0,
              ),
              child: Text(
                dogsCount(value.dogsList.length),
                style: AppStyles.listsHeaderTextStyle,
              ),
            ),
            ListView.builder(
              padding: const EdgeInsets.only(
                top: 5,
                bottom: 20,
                left: 15,
                right: 15,
              ),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemCount: value.dogsList.length,
              itemBuilder: (context, index) => DogProfileCardWidget(
                dogInfo: value.dogsList[index],
                editProfile: openProfileScreen,
                dogIndex: index,
              ),
            ),
          ],
        ),
      );
    },
  ),
);

Ok so the issue is with the SizedBox

CodePudding user response：

The issue was the SizeBox which did not have a height I fixed this by wrapping the loader with a sizebox and giving it a hight

 return SizedBox(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,

CodePudding user response：

Use Sizedbox Widget for spacing

if (value.isLoading) {
        return Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxsiAlignment: CrossAxisAlignment.center,
          children: [
            const SizedBox(height: 120.0),
            Center(
              child: loadingWidget(),
            ),
          ],
        );
      }