How to remove space after Transform.translate in CustomScrollView?

user_1984747 0
Viewed 530

Help me, any idea how to remove the space between yellow and green Container? It's caused by the Container have additional height after transform translate.

I need CustomSrollView with SliverAppBar and a child below it.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark(),
      home: Scaffold(
        body: Example(),
      ),
    );
  }
}

class Example extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(slivers: [
      SliverSafeArea(
        top: false,
        sliver: SliverAppBar(
          backgroundColor: Colors.black.withOpacity(0.2),
          floating: true,
          toolbarHeight: 0,
          bottom: const PreferredSize(
              preferredSize: Size.fromHeight(30), child: Text("AppBar")),
        ),
      ),
      SliverToBoxAdapter(
        child: Transform.translate(
          offset: const Offset(0.0, -30.0),
          child: Container(height: 500, color: Colors.yellow),
        ),
      ),
      SliverToBoxAdapter(
          child: Align(child: Container(height: 500, color: Colors.green))),
    ]);
  }
}
flutter-layout flutter
1 Answers

Ok, you want to move the yellow container, but you don't want to take translate spaces the space. I don't know what design you are doing, I may just reduce the height in this case. Or use padding in extra spaces.

According to the question, we can use stack like.

 SliverToBoxAdapter(
          child: Container(
            color: Colors.amber,
            height: 500 + 500,
            child: Stack(
              children: [
                Align(
                  alignment: Alignment.bottomCenter,
                  child: Container(
                    height: 500,
                    color: Colors.green,
                  ),
                ),
                Positioned(
                  bottom: 500 - 30,
                  child: Transform.translate(
                    offset: const Offset(0.0, -30.0),
                    child: Container(
                      height: 500,
                      color: Colors.yellow,
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),

But in this case we are overlapping with green container.

We can

  • reduce the size,
  • use stack, will overlap with green container
user_101571270
Related