Center Widget in flutter not showing in center of the device

Question

Widget build(BuildContext context) {
CollectionReference quizes =
    FirebaseFirestore.instance.collection('LiveQuizes');
SizeConfig().init(context);
return Scaffold(
  body: SingleChildScrollView(
    physics: BouncingScrollPhysics(parent: AlwaysScrollableScrollPhysics()),
    child: StreamBuilder<QuerySnapshot>(
      stream: quizes.snapshots(),
      builder:
          (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
        if (snapshot.hasError) {
          Fluttertoast.showToast(
              msg: "Something went wrong", toastLength: Toast.LENGTH_LONG);
        }

        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(
            child: SpinKitRing(
              color: Colors.blue,
              lineWidth: 4,
              size: 40,
            ),
          );
        }
       
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding: const EdgeInsets.only(
                top: 10,
                left: 15,
              ),
              child: Text("Live Quizes", style: drawerStyle),
            ),
            ListView.builder(
              physics: BouncingScrollPhysics(),
              shrinkWrap: true,
              scrollDirection: Axis.vertical,
              itemCount: snapshot.data.docs.length,
              itemBuilder: (BuildContext context, int index) =>
                  quizDetailswidget(context, snapshot.data.docs[index]),
            ),
          ],
        );
      },
    ),
  ),
 );
 }

Here i have used StreamBuilder to get he details dynamically but when this condition is matched snapshot.connectionState == ConnectionState.waiting i want to show the circular loader i have used the package Spinket but the problem is that the loader is not showing in the center. The loader is centered horizontally but not vertically

question from:https://stackoverflow.com/questions/65951238/center-widget-in-flutter-not-showing-in-center-of-the-device

Answer 1

Do not wrap the Center widget inside a SingleChildScrollView. Looking at your code, you only need the scrollview when Column is rendered. Just reorganize your code similar to this.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: SafeArea(
          child: FutureBuilder<void>(
            future: Future<void>.delayed(const Duration(seconds: 3)),
            builder: (_, AsyncSnapshot<void> snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return const Center(child: CircularProgressIndicator());
              }

              return SingleChildScrollView(
                child: Column(
                  children: List.generate(
                    50,
                    (index) => ListTile(
                      title: Text('Tile $index'),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}