How to remove space after Transform.translate in CustomScrollView?

Question

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

Answer 1

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