Создание поиска на панели приложений, который превращается в значок при прокрутке вниз во Flutter? - PullRequest
Новая
       69

Создание поиска на панели приложений, который превращается в значок при прокрутке вниз во Flutter?

0 голосов
/ 14 июля 2020

Я создал панель поиска, мне нужно добавить к ней функцию, чтобы всякий раз, когда пользователь прокручивает страницу вниз, панель поиска превращается в значок на панели приложений, который можно щелкнуть еще раз, чтобы развернуть.

Это контейнер панели приложений 

Container(
              height: 122,
              color: AppColors.kDefaultPink,
              child: Padding(
                padding: const EdgeInsets.all(10.0),
                child: Column(
                  children: <Widget>[
                    //Location text
                    SizedBox(height: 10.0,),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Icon(
                          Icons.location_on,
                          color: Colors.white,
                        ),
                        SizedBox(width: 12.0),
                        Text("Delhi NCR",style: TextStyle(color: Colors.white, fontSize: 18.0),),
                      ],
                    ),
                    SizedBox(height: 20.0,),
                    //SearchBOX
                    SearchBox(onChanged: (value) {}),
                  ],
                ),
              ),
            ),

Это код для строки поиска, которая будет присутствовать на панели приложений 

import 'package:flutter/material.dart';
import 'package:zattireuserapp/views/AppColors.dart';

class SearchBox extends StatelessWidget {

  final ValueChanged onChanged;

  const SearchBox({Key key, this.onChanged}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 5),
      child: Container(
        width: 390,
        height: 45,
        margin: EdgeInsets.symmetric(horizontal: 22.0),
        decoration: BoxDecoration(
          color: Colors.white.withOpacity(1),
          borderRadius: BorderRadius.circular(12),
        ),
        child: TextField(
          onChanged: onChanged,
          style: TextStyle(color: AppColors.blackColor),
          decoration: InputDecoration(
            enabledBorder: InputBorder.none,
            focusedBorder: InputBorder.none,
            prefixIcon: Icon(Icons.search),
            hintText: 'Search for anything',
            hintStyle: TextStyle(fontSize: 15),
          ),
        ),
      ),
    );
  }
}

1 Ответ

0 голосов
/ 16 июля 2020

Вы можете использовать LayoutBuilder, чтобы получить самую большую высоту ленты AppBar. Когда big.height = 80.0, это на самом деле означает, что панель приложений Silever свернута.

Вот пример: 

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
      home: MyApp(),
    ));

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  var top = 0.0;
  ScrollController _scrollController;
  
    @override
  void initState() {
    _scrollController = ScrollController(keepScrollOffset: true);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: NestedScrollView(
          controller: _scrollController,
      headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
        return <Widget>[
          SliverAppBar(
              expandedHeight: 200.0,
              floating: false,
              pinned: true,
              flexibleSpace: LayoutBuilder(
                  builder: (BuildContext context, BoxConstraints constraints) {
                top = constraints.biggest.height;
                return FlexibleSpaceBar(
                    centerTitle: true,
                    title: top >= 80 ? TextField() : IconButton(icon: Icon(Icons.search), onPressed: () => _scrollController.jumpTo(0)) // condition
                );
              })),
        ];
      },body: ListView.builder(
        itemCount: 100,
        itemBuilder: (context,index){
          return Text("List Item: " + index.toString());
        },
      ),
    ));
  }
}

Прошу прощения за грязный код, но я надеюсь, что вы получили идея

...