Как я могу изменить виджет SliverAppbar, чтобы получить следующий макет / Интегрировать панель поиска TextInputField в SliverAppbar - PullRequest
Новая
       21

Как я могу изменить виджет SliverAppbar, чтобы получить следующий макет / Интегрировать панель поиска TextInputField в SliverAppbar

1 голос
/ 02 июня 2019

Я хочу получить следующий макет:

Ссылка на макет

Пока я использую Sliver.Но проблема в SearchBar!Я хочу, чтобы SliverAppBar точно соответствовал макету и был прикреплен к вершине.Любые предложения?

Я пытался найти решение по этой ссылке, но проблема в том, что сама панель приложения закреплена сверху, а не FlexibleSpacebar!

Как реализовать SliverAppBar с помощьюсворачиваемая панель поиска

Вот что я пробовал до сих пор:

Родительский щепка: 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Container(
          margin: EdgeInsets.all(5),
          child: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                automaticallyImplyLeading: false,
                pinned: true,
                floating: true,
                expandedHeight: 80,
                titleSpacing: 0,
                backgroundColor: Colors.white,
                elevation: 1.0,
                flexibleSpace: FlexibleSpaceBar(
                  background: _searchCard(),
                ),
              ),
              SliverToBoxAdapter(
                child: _shopListTitle(),
              ),
              SliverToBoxAdapter(
                child: SizedBox(height: 15),
              ),
              SliverToBoxAdapter(
                child: ScrollableBadges(),
              ),
              SliverToBoxAdapter(
                child: SizedBox(height: 15),
              ),
              GridList(),
            ],
          ),
        ),
      ),
    );
  }

Виджет панели поиска: 

Widget _searchCard() => Container(
      child: Card(
        color: Colors.lightGreen[100],
        elevation: 5.0,
        child: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Expanded(
                child: TextField(
                  decoration: InputDecoration(
                    prefixIcon: Icon(
                      Icons.search,
                      color: Color.fromRGBO(41, 47, 54, 1),
                    ),
                    hintText: "Search",
                    hintStyle: TextStyle(color: Colors.black38),
                    border: InputBorder.none,
                  ),
                  style: TextStyle(
                    color: Color.fromRGBO(41, 47, 54, 1),
                  ),
                  cursorColor: Color.fromRGBO(41, 47, 54, 1),
                  textInputAction: TextInputAction.search,
                  autocorrect: false,
                ),
              ),
              Icon(
                Icons.menu,
                color: Color.fromRGBO(41, 47, 54, 1),
              ),
            ],
          ),
        ),
      ),
    );

1 Ответ

0 голосов
/ 02 июня 2019

Гибкое пространство предназначено для виджета, который расширяется или сжимается при прокрутке элементов в списке за пределами панели приложения ленты. Если вы хотите использовать панель поиска в качестве фиксированного виджета вверху, вы должны использовать вместо этого виджет поиска на панели приложений, как показано ниже. 

 SliverAppBar(
            automaticallyImplyLeading: false,
            pinned: true,
            floating: true,
            title: _searchCard(),
            titleSpacing: 0,
            backgroundColor: Colors.white,
            elevation: 1.0,
          )
...