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]),
            ),
          ],
        );
      },
    ),
  ),
 );
 }

在这里，我使用 StreamBuilder 动态获取详细信息，但是当此条件匹配时，snapshot.connectionState == ConnectionState.waiting 我想显示循环加载器，我使用了 Spinket 包，但问题是加载器没有显示在中心。 loader 水平居中，但不是垂直居中

Answer 1

不要将 Center 小部件包装在 SingleChildScrollView 中。查看您的代码，您只需要在呈现 Column 时滚动视图。只需像这样重新组织您的代码即可。

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'),
                    ),
                  ),
                ),
              );
            },
          ),
        ),
      ),
    );
  }
}

颤动中的中心小部件未显示在设备中心

1 个答案: