suggestions.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  final suggestionsKey = GlobalKey();
  int currentIndex;
  double height;
  final controllers = List.generate(30, (_) => TextEditingController());
  final suggestionsList = [
    Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Text 1"),
    ),
    Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Text 2"),
    ),
    Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Text 3"),
    ),
    Padding(
      padding: const EdgeInsets.all(10),
      child: Text("Text 4"),
    ),
  ];

  @override
  Widget build(BuildContext context) {
    final positioned = currentIndex == null
        ? SizedBox()
        : Positioned(
            key: suggestionsKey,
            left: 5,
            top: (40 * (currentIndex + 1)).toDouble(),
            child: Container(
              decoration: BoxDecoration(
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    blurRadius: 15,
                    offset: Offset(0, 10),
                    color: Colors.black26,
                  ),
                ],
              ),
              child: Column(
                children: suggestionsList,
              ),
            ),
          );
    return Scaffold(
      appBar: AppBar(
        elevation: 1,
        centerTitle: true,
        brightness: Brightness.light,
        backgroundColor: Colors.yellow.shade100,
        iconTheme: IconThemeData(color: Colors.black),
        leading: BackButton(),
        title: Text("List", style: TextStyle(color: Colors.black)),
        actions: [
          TextButton(
            child: Text("Help"),
            style: ButtonStyle(
              foregroundColor: MaterialStateProperty.all(Colors.black),
            ),
            onPressed: () {},
          ),
          SizedBox(width: 10),
        ],
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(40),
          child: DecoratedBox(
            decoration: BoxDecoration(
              color: Colors.yellow.shade600,
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                Padding(
                  padding: EdgeInsets.all(12),
                  child: Text("Name"),
                ),
                Text("Quantity"),
                Text("Type"),
              ],
            ),
          ),
        ),
      ),
      body: GestureDetector(
        onTap: () {
          FocusScope.of(context)?.unfocus();
        },
        child: Scrollbar(
          child: SingleChildScrollView(
            child: Stack(
              overflow: Overflow.visible,
              children: [
                ListView.builder(
                  shrinkWrap: true,
                  padding: EdgeInsets.only(bottom: (height ?? 0) + 50),
                  physics: NeverScrollableScrollPhysics(),
                  itemCount: controllers.length,
                  itemBuilder: (context, index) {
                    return Container(
                      height: 40,
                      child: TextField(
                        onTap: () {
                          height = suggestionsKey?.currentContext?.size?.height;
                          print(suggestionsKey?.currentContext?.size?.height);
                          currentIndex = index;
                          // suggestionsList.add(
                          //   Padding(
                          //     padding: const EdgeInsets.all(10),
                          //     child: Text("Text 5"),
                          //   ),
                          // );
                          setState(() {});
                          if (suggestionsKey.currentContext != null)
                            Scrollable.ensureVisible(
                              suggestionsKey.currentContext,
                            );
                        },
                        controller: controllers[index],
                        decoration: InputDecoration(hintText: "Demo text"),
                      ),
                    );
                  },
                ),
                positioned
              ],
            ),
          ),
        ),
      ),
      bottomNavigationBar: BottomAppBar(
        child: Container(
          height: 70,
          padding: EdgeInsets.all(10),
          child: Row(
            children: [
              Expanded(
                child: TextButton(
                  child: Text("Discover"),
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                    backgroundColor: MaterialStateProperty.all(Colors.indigo),
                  ),
                  onPressed: () {
                    setState(() {
                      currentIndex = null;
                    });
                  },
                ),
              ),
              SizedBox(width: 10),
              Expanded(
                child: TextButton(
                  child: Text("Continue"),
                  style: ButtonStyle(
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                    backgroundColor: MaterialStateProperty.all(Colors.indigo),
                  ),
                  onPressed: () {},
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}