小部件之间有不必要的间距

Question

所以我在 flutter 应用程序中遇到了一个问题，我不知道如何解决，但它在小部件之间分配了空间。所以基本上在一个屏幕中，我使用 futurebuilder 创建了 listview.builder ，它是从屏幕顶部开始的，但在我的实现从 futurebuilder 更改为 Cosumer 之后，因为现在我已经使用了提供者状态管理。在那个消费者中，我使用了与 futurebuilder 相同的 listview.builder 。但在那之后，现在屏幕开头有一些空间，我一开始就没有使用任何小部件之王。为了澄清起见，我还使用红色容器作为消费者小部件的父小部件，以便空白区域变成红色，然后我将颜色从红色更改为绿色，因此它也发生了变化。现在我很困惑那个空间从哪里来？

看到红色从 Stack Widget 之后立即开始。

这是代码：

import 'package:app/push_notification_service/push_notifications.dart';
import 'package:app/screens/profile.dart';
import 'package:app/screens/story_page.dart';
import 'package:app/stateManagementModel/story_manage_state.dart';
import 'package:app/stories/get_stories.dart';
import 'package:flutter/material.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:provider/provider.dart';
// import 'package:flutter_carousel_slider/carousel_slider.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';
import '../widgets/loading_widget.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({super.key});

  @override
  State<StatefulWidget> createState() => HomeScreenState();
}

class HomeScreenState extends State<HomeScreen> {

  final getStories = GetStories();

  int currentIndex = 0;
  List storyCount = [];
  List storyImageList = [];
  List storyNameList = [];

  @override
  void initState() {
    super.initState();
    PushNotifications().requestNotificationPermission();
    PushNotifications().firebaseInit(context);
    PushNotifications().setupInteractMessage(context);
    PushNotifications().getDeviceToken();
    PushNotifications().foreGroundMessage();
    getStories.getPopularStories().then((value) {
      for (int i = 0; i < value!.keys.length; i++) {
        storyCount.add(i);
      }
      storyImageList.addAll(value.values);
      storyNameList.addAll(value.keys);
    });
  }

  @override
  Widget build(BuildContext context) {
    final Size screenSize = MediaQuery.of(context).size;
    final double width = screenSize.width;
    final double height = screenSize.height;

    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        actions: [
          
          Padding(
            padding: const EdgeInsets.all(10.0),
            child: IconButton(
              onPressed: () {
                Navigator.of(context).push(PageRouteBuilder(
                    pageBuilder: (_, __, ___) => const Profile(),
                    transitionDuration: const Duration(milliseconds: 500),
                    transitionsBuilder: (_, a, __, c) => FadeTransition(
                      opacity: a,
                      child: c,
                    )));
              },
              icon: Icon(
                Icons.person,
                size: height * 0.04,
                shadows: const [Shadow(color: Colors.black, blurRadius: 15.0, offset: Offset(0, 0),)],
              ),
            ),
          ),
        ],
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            SizedBox(
              height: height / 1.5,
              // width: width,
              child: Center(
                child: Stack(
                  children: [
                    ShaderMask(
                      shaderCallback: (Rect rect) {
                        return const LinearGradient(
                            begin: Alignment.topCenter,
                            end: Alignment.bottomCenter,
                            colors: [
                              Colors.transparent,
                              Colors.black
                            ],
                            stops: [
                              0.2,
                              1.0
                            ]).createShader(rect);
                      },
                      blendMode: BlendMode.dstOut,

                      child: CarouselSlider(
                        options: CarouselOptions(
                          height: height,
                          // aspectRatio: 2.5 / 1.3,
                          viewportFraction: 1.02,
                          enlargeCenterPage: true,
                          autoPlay: true,
                          autoPlayInterval: const Duration(seconds: 3),
                          autoPlayCurve: Curves.fastOutSlowIn,
                          initialPage: -1,
                          onPageChanged: (index, reason) {
                            currentIndex = index;
                            setState(() {});
                          },
                        ),
                        items: storyCount.map((e) => Builder(
                          builder: (BuildContext context) =>
                              SizedBox(
                                height: height,
                                width: width,
                                child: Image.network(
                                  storyImageList[e],
                                  fit: BoxFit.fill,
                                ),
                              ),
                        )).toList(),
                      ),
                    ),

                    Positioned(
                      bottom: height * 0.05,
                      left: 0,
                      right: 0,
                      child: Row(
                        children: [

                          Expanded(flex: 3,child: Container()),

                          Expanded(
                            flex: 4,
                            child: ElevatedButton.icon(
                              onPressed: () {
                                debugPrint("CLICKED ${storyNameList[currentIndex]}\n$storyNameList - $currentIndex");


                                Navigator.of(context).push(
                                    PageRouteBuilder(pageBuilder: (_, __,___) =>
                                        StoryPage(story: storyNameList[currentIndex].toString().trim(),poster: storyImageList[currentIndex]),
                                        transitionDuration: const Duration(milliseconds: 500),
                                        transitionsBuilder: (_, a, __, c) => FadeTransition(
                                          opacity: a,
                                          child: c,
                                        )));
                              },
                              style: ElevatedButton.styleFrom(
                                padding: const EdgeInsets.all(10),
                                elevation: 1.8,
                                shape: const RoundedRectangleBorder(
                                    borderRadius: BorderRadius.all(
                                        Radius.circular(5.0))),
                                backgroundColor: Colors.white,
                                foregroundColor: Colors.black, // splash color
                              ),
                              label: const Text("Play"),
                              icon: const Icon(Icons.play_arrow_rounded,),
                            ),
                          ),

                          Expanded(flex: 3,child: Container()),

                        ],
                      ),
                    ),

                    Positioned(
                      bottom: height * 0.01,
                      left: 0,
                      right: 0,
                      child: Center(
                        child: AnimatedSmoothIndicator(
                          activeIndex: currentIndex,
                          count: storyImageList.length,
                          effect: const WormEffect(
                            // dotHeight: width * 0.02,
                            // dotWidth: width * 0.02,
                              type: WormType.thin,
                              activeDotColor: Colors.black26
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),

            Container(
              color: Colors.red,
              child: Consumer<StoryManageState>(
                builder: (context, storyManageState, child) {

                  final generaList = storyManageState.storyGenera;

                  if(generaList.isEmpty) {
                    loadingProgressIndicator(context);
                  }

                  return ListView.builder(
                    physics: const NeverScrollableScrollPhysics(),
                    shrinkWrap: true,
                    itemCount: generaList.length,
                    itemBuilder: (context, index) {
                      return Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [

                          Text(
                            generaList[index],
                            style: TextStyle(
                              fontSize: height * 0.025,
                            ),
                          ),

                          SizedBox(
                            height: height * 0.01,
                          ),

                          SizedBox(
                            height: width * 0.6,
                            width: width,
                            child: FutureBuilder<Map<String, String>>(
                              future: getStories.getGeneraStories(generaList[index]),
                              builder: (context, snapshot) {
                                if (!snapshot.hasData) {
                                  return loadingProgressIndicator(context);
                                }

                                final stories = snapshot.data!;

                                return ListView.builder(
                                  scrollDirection: Axis.horizontal,
                                  itemCount: stories.length,
                                  itemBuilder: (context, index) {
                                    final storyId = stories.keys.toList()[index];
                                    final storyPoster = stories.values.toList()[index];
                                    return InkWell(
                                      onTap: () {
                                        Navigator.of(context).push(
                                            PageRouteBuilder(pageBuilder: (_, __,___) =>
                                                StoryPage(story: storyId,poster: storyPoster),
                                                transitionDuration:
                                                const Duration(
                                                    milliseconds:
                                                    500),
                                                transitionsBuilder:
                                                    (_, a, __, c) =>
                                                    FadeTransition(
                                                      opacity: a,
                                                      child: c,
                                                    )));
                                      },
                                      child: Card(
                                        shape: RoundedRectangleBorder(
                                          borderRadius:
                                          BorderRadius.circular(10),
                                        ),
                                        elevation: 10,
                                        child: Center(
                                          child: AspectRatio(
                                            aspectRatio: 4 / 5,
                                            child: ClipRRect(
                                              borderRadius:
                                              BorderRadius.circular(
                                                  10),
                                              child: Image.network(
                                                storyPoster,
                                                loadingBuilder: (context, Widget child, ImageChunkEvent? loadingProgress) {
                                                  if (loadingProgress == null) return child;
                                                  return Center(
                                                    child: loadingProgressIndicator(context),
                                                  );
                                                },
                                                fit: BoxFit.fill,
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    );
                                  },
                                );
                              },
                            ),
                          ),

                          SizedBox(
                            height: height * 0.01,
                          ),
                        ],
                      );
                    },
                  );
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

ListView.builder

作为一些填充。只需将其删除即可：

return ListView.builder(
   padding: EdgeInsets.zero,