View behind Scaffold - Flutter/Dart

Question

I tried a lot to get the behavior of the iOS project https://github.com/ivanvorobei/SPLarkController working in Flutter / Dart. I do not understand how to get another view behind the scaffold (holding also the bottom navigation bar). Any ideas how this can be achieved?

Answer 1

This could be achieved with the help of Stack.

First layer for the buttons on the bottom:

Second layer for the main content:

Then, you can wrap the BottomNavBar inside GestureDetector with onVerticalDragUpdate property.

Complete Code:

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Builder(
          builder: (context) => MyChild(MediaQuery.of(context).size.height),
        ),
      ),
    );
  }
}

class MyChild extends StatefulWidget {
  final double screenHeight;
  const MyChild(this.screenHeight, {Key? key}) : super(key: key);

  @override
  _MyChildState createState() => _MyChildState();
}

class _MyChildState extends State<MyChild> {
  double val = 1.0;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Container(
          padding: const EdgeInsets.only(bottom: 20.0),
          color: const Color(0xFF303030),
          child: Padding(
            padding: const EdgeInsets.only(left: 20.0),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                Row(
                  children: [
                    ElevatedButton(
                        onPressed: () {}, child: const Text('Button 1')),
                    const SizedBox(
                      width: 20.0,
                    ),
                    ElevatedButton(
                        onPressed: () {}, child: const Text('Button 2'))
                  ],
                ),
                const SizedBox(
                  height: 20,
                ),
                Row(
                  children: [
                    ElevatedButton(
                        onPressed: () {}, child: const Text('Button 3')),
                    const SizedBox(
                      width: 20.0,
                    ),
                    ElevatedButton(
                        onPressed: () {}, child: const Text('Button 4'))
                  ],
                ),
              ],
            ),
          ),
        ),
        LayoutBuilder(
          builder: (context, constraints) => AnimatedContainer(
            duration: const Duration(milliseconds: 500),
            curve: Curves.ease,
            height: constraints.maxHeight * val,
            color: Colors.white,
            child: Column(
              children: [
                Expanded(
                  child: ListView.builder(
                    physics: const BouncingScrollPhysics(),
                    itemCount: 25,
                    itemBuilder: (context, index) => ListTile(
                      title: Text('ListTile $index'),
                    ),
                  ),
                ),
                GestureDetector(
                  onVerticalDragUpdate: (details) {
                    if (details.delta.dy < 0) { // If the user drags upwards
                      setState(() {
                        val = 0.7;
                      });
                    } else if (details.delta.dy > 0) { // If the user drags downwards
                      setState(() {
                        val = 1.0;
                      });
                    }
                  },
                  // Create your bottom navigation bar here
                  // and not bottomNavigationBar property of Scaffold
                  child: Container(
                    color: Colors.green.shade100,
                    height: 80,
                  ),
                )
              ],
            ),
          ),
        ),
      ],
    );
  }
}