Big white space between search bar and list of words about 4lingo

[TokisakiKurumi2001]

This is one of the approach to reduce the space.

Firstly, the space is created due to the height of Container inside lib/home/components/header_with_searchbox.dart:

Before:

class HeaderWithSearchBox extends StatelessWidget {
  const HeaderWithSearchBox({
    Key key,
    @required this.size,
  }) : super(key: key);
  final Size size;
  @override
  Widget build(BuildContext context) {
    return Container(
     margin: EdgeInsets.only(bottom: 20.0 * 2.5),
      height: size.height * 0.2,

Therefore, we reduce the height to 0.12 * size.height. At the same time, remove the margin bottom.
After:

class HeaderWithSearchBox extends StatelessWidget {
  const HeaderWithSearchBox({
    Key key,
    @required this.size,
  }) : super(key: key);
  final Size size;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: size.height * 0.12,

However, this fix will lead to big corruption in search bar(search bar moving upward near appbar). In order to fix this, we replace bottom: 70 in Positioned with top: 45.

Before,

Widget build(BuildContext context) {
    return Container(
      height: size.height * 0.12,
      child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
              left: 20.0,
              right: 20.0,
              bottom: 56,
            ),
            height: size.height * 0.2 - 100,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(36),
                bottomRight: Radius.circular(36),
              ),
            ),
          ),
          Positioned(
            bottom: 70,
            left: 0,
            right: 0,

After,

Widget build(BuildContext context) {
    return Container(
      height: size.height * 0.12,
      child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
              left: 20.0,
              right: 20.0,
              bottom: 56,
            ),
            height: size.height * 0.2 - 100,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(36),
                bottomRight: Radius.circular(36),
              ),
            ),
          ),
          Positioned(
            top: 45,
            left: 0,
            right: 0,

[TokisakiKurumi2001]

[TokisakiKurumi2001]

[TokisakiKurumi2001]

iPhone 6s Plus seems not to work very well with this approach

[TokisakiKurumi2001]

[TokisakiKurumi2001]

Neither does this Samsung phone.

[TokisakiKurumi2001]

Here is the suggestion for making pinned search bar when scrolling and also fixing the blank space:

lib/home/home_page.dart>HomeScreen>Scaffold>CustomScrollView

SliverPersistentHeader(
            pinned: true,
            delegate: PersistentHeader(
              widget: HeaderWithSearchBox(size: size),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Column(
                  children: <Widget>[
                    Word(),
                  ],
                ),
              ],
            ),
          ),

lib/home/�components/header_with_searchbox.dart

class HeaderWithSearchBox extends StatelessWidget {
  const HeaderWithSearchBox({
    Key key,
    @required this.size,
  }) : super(key: key);
  final Size size;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: size.height * 0.12,
      child: Stack(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(
              left: 20.0,
              right: 20.0,
              bottom: 56,
            ),
            /*
            height: size.height * 0.2 - 100,
            decoration: BoxDecoration(
              color: Colors.blue,
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(36),
                bottomRight: Radius.circular(36),
              ),
            ),
             */
          ),

/* ........................... */

class PersistentHeader extends SliverPersistentHeaderDelegate {
  final Widget widget;

  PersistentHeader({this.widget});

  @override
  Widget build(
      BuildContext context, double shrinkOffset, bool overlapsContent) {
    return Container(
      width: double.infinity,
      height: 105.0,
      child: Card(
        margin: EdgeInsets.all(0),
        color: Colors.white,
        elevation: 0,
        child: Center(child: widget),
      ),
    );
  }

  @override
  double get maxExtent => 105.0;

  @override
  double get minExtent => 105.0;

  @override
  bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
    return true;
  }
}