Flutter应用中AppBar与卡片间空白消除方案求助

Hey there! Let's figure out how to squash that annoying blank space between your AppBar and card component. Here are a few targeted fixes to try based on your code:

1. Set an explicit expandedHeight for your SliverAppBar #

Your SliverAppBar uses a flexibleSpace but doesn't define an expandedHeight, which can throw off the layout calculation and leave unexpected gaps. Adding this property will lock the AppBar to a consistent height:

return SliverAppBar(
  backgroundColor: const Color.fromRGBO(3, 9, 23, 1),
  pinned: true,
  expandedHeight: 180, // Adjust this value to match your design needs
  title: Text(
    "Hi, ${token.user.name} \nWhat do you want ship?",
    style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),
  ),
  centerTitle: false,
  flexibleSpace: const FlexibleSpaceBar(
    background: FadeInImage(
      placeholder: AssetImage('assets/loading.gif'),
      image: AssetImage('assets/truck.png'),
      fit: BoxFit.scaleDown,
      alignment: Alignment.bottomRight,
    ),
  ),
);

2. Disable scroll body for SliverFillRemaining #

If your DisplayOptions content doesn't need to scroll on its own, setting hasScrollBody: false will prevent SliverFillRemaining from adding unnecessary extra space:

SliverFillRemaining(
  hasScrollBody: false, // Add this line to remove unused scroll space
  child: FutureBuilder(
    future: getData(),
    builder: (context, AsyncSnapshot<OptionsResponse?> snapshot) {
      if (!snapshot.hasData) {
        return const Center(child: CircularProgressIndicator());
      } else {
        return DisplayOptions(
          snapshot.data!.options.commodities,
          widget.token);
      }
    },
  ),
),

3. Check for default margins in your Card or DisplayOptions #

Flutter's Card component comes with a default margin (usually EdgeInsets.all(8.0)). If this is the source of the gap, override it:

Card(
  margin: EdgeInsets.zero, // Remove default top margin
  // Rest of your Card code...
)

Also double-check if your DisplayOptions widget has any unintended top padding or margin that's pushing content down.

4. Remove AppBar shadow (if it's mistaken for blank space) #

Sometimes the SliverAppBar's default shadow can look like a blank gap. Turn it off with:

SliverAppBar(
  elevation: 0, // Disable shadow
  // Rest of your AppBar code...
)

Start with the first two fixes—they’re the most likely culprits here. If the gap still remains, move on to checking component margins.

内容的提问来源于stack exchange，提问作者Oliver Mendez