How can I implement the iPhone Safari search bar at the bottom UI (floating action) in Flutter?

Question

[enter image description here](https://i.sstatic.net/tCkIRzOy.png)

I like how the search bar on my iPhone's safari is below and the box gets bigger and smaller in real time when I scroll, so it doesn't bother me when I scroll down, but I can't find a way to implement it. I think it's an attractive UI that I can keep checking the content you search below Which widget should I use? How should I implement it?

I used SliverPersistentHeaderDelegate to implement it with the floating property of SliverPersistentHeader, and I couldn't implement logic such as not only being fixed on top, but also getting bigger and smaller boxes.

Answer 1

So I was so amused by your curiosity that even I tried doing what you were thinking and came up with this:

import 'package:car/cd_widgets/cd_gap.dart';
import 'package:flutter/material.dart';

class BottomSliverAppBar extends StatefulWidget {
  @override
  _BottomSliverAppBarState createState() => _BottomSliverAppBarState();
}

class _BottomSliverAppBarState extends State<BottomSliverAppBar> {
  ScrollController _scrollController = ScrollController();
  TextEditingController searchController = TextEditingController();
  bool _isExpanded = true;

  @override
  void initState() {
    super.initState();
    _scrollController.addListener(() {
      setState(() {
        _isExpanded = _scrollController.position.pixels <= 0;
      });
    });
  }

  @override
  void dispose() {
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Column(
          children: [
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
            Container(
              height: 100.0,
              color: Colors.blue,
            ),
            Container(
              height: 100.0,
              color: Colors.orange,
            ),
          ],
        ),
      ),
      bottomSheet: AnimatedContainer(
        duration: Duration(milliseconds: 500),
        curve: Curves.easeInOut,
        height: _isExpanded ? 150.0 : 40.0,
        decoration: BoxDecoration(
          color: Colors.grey[300],
          borderRadius: BorderRadius.circular(15.0),
        ),
        padding: EdgeInsets.symmetric(horizontal: 16.0),
        child: _isExpanded
            ? SingleChildScrollView(
              child: Column(
                children: [
                  Row(
                            children: [
                  Expanded(
                    child: TextField(
                      controller: searchController,
                      decoration: InputDecoration(
                        hintText: 'Search...',
                        hintStyle: TextStyle(fontSize: 16.0),
                        border: InputBorder.none,
                      ),
                    ),
                  ),
                  IconButton(
                    icon: Icon(Icons.search),
                    onPressed: () {},
                  ),
                            ],
                          ),
                  VerticalGap(space: 10.0,),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      Icon(Icons.home),
                      Icon(Icons.wordpress),
                      Icon(Icons.flutter_dash),
                      Icon(Icons.dangerous),
                      Icon(Icons.close_fullscreen),
                    ],
                  )
                ],
              ),
            )
            : Center(
          child: Padding(
            padding: const EdgeInsets.symmetric(horizontal: 8.0),
            child: Text(
              searchController.text.isEmpty ? 'Search...' : searchController.text,
              style: TextStyle(fontSize: 16.0),
            ),
          ),
        ),
      ),
    );
  }
}

No need of using Any Slivers, AnimatedContainer widget and scrollController listeners does the trick

Please check and let me know if this is the actual thing u wanted.

Thanks

Video attached: implementation video link

Image: