Flutter: панель поиска переполнена на 38 пикселей внизу

Я реализую SearchBar, используя flappy_search_bar , и я хочу уменьшить его снизу, чтобы он соответствовал appBar, потому что в настоящее время я получаю сообщение об ошибке (см. также скриншот ниже):

A RenderFlex overflowed by 38 pixels on the bottom.

Пробовал оборачивать разными виджетами, но ничего не дало. Как сделать SearchBar тоньше, чтобы он хорошо помещался в appBar?

мой код:

import 'package:flappy_search_bar/search_bar_style.dart';
import 'package:flappy_search_bar/flappy_search_bar.dart';
import 'package:flutter/material.dart';

class Post {
  final String title;
  final String description;

  Post(this.title, this.description);
}

Future<List<Post>> search(String search) async {
  await Future.delayed(Duration(seconds: 2));
  return List.generate(search.length, (int index) {
    return Post(
      "Title : $search $index",
      "Description :$search $index",
    );
  });
}

@override
Widget build(BuildContext context) {
  return Material(
    child: Scaffold(
    resizeToAvoidBottomInset: true,
      resizeToAvoidBottomPadding: false,
      backgroundColor: Colors.transparent,
      appBar: AppBar(
        elevation: 0.0,
         backgroundColor: Colors.lightGreen[800],
         actions: <Widget>[
         Expanded(
           child: Padding(
           padding: const EdgeInsets.only(
             left: 50,
             right: 5,
             bottom: 10,
             top: 4,
           ),
           child: SearchBar<Post>(
             searchBarStyle: SearchBarStyle(
               backgroundColor: Colors.white60,
               borderRadius: BorderRadius.circular(30),
             ),
             onSearch: search,
             onItemFound: (Post post, int index) {
               return ListTile(
                 title: Text(post.title),
                 subtitle: Text(post.description),
                );
               },
             ),
           ),
         ),
          IconButton(
            icon: Icon(Icons.shopping_cart_outlined),
             onPressed: null
          ),
          IconButton(
            icon: Icon(Icons.favorite),
            onPressed: null
          ),
        ],
        leading: IconButton(
           icon: Icon(Icons.logout)
            onPressed: null
        ),
      ),
    body: Center(CircularProgressIndicator())
    ),  
  );
}

Скриншот текущего состояния приложения:

Попробуйте использовать его свойство высоты, если оно есть.

Sulav Parajuli 24.12.2020 02:18
1
1
545
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Как видно из flappy_search_bar исходных файлов, параметр height представляет собой жестко закодированное значение, равное 80.

Поэтому мы можем изменить высоту AppBar, чтобы решить проблему:

class CustomAppBar extends PreferredSize {
  CustomAppBar({Key key, Widget title, List<Widget> actions}) : super(
    key: key,
    preferredSize: Size.fromHeight(90),
    child: AppBar(
      title: title,
      elevation: 0.0,
      backgroundColor: Colors.lightGreen[800],
      actions: actions,
    ),
  );
}

И используем его в нашем коде:

@override
Widget build(BuildContext context) {
  return Material(
    child: Scaffold(
       resizeToAvoidBottomInset: true,
       resizeToAvoidBottomPadding: false,
       backgroundColor: Colors.transparent,
       appBar: CustomAppBar(actions: _appBarActions)
     )
  );
}

Другие вопросы по теме