View behind Scaffold – Flutter/Dart

Issue

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?

Solution

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

Answered By – Mayank

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0