Flutter search boxSearchBar

Inscription
- Holding the sword in the world, starting from your accumulation, wherever you go, you must strive for perfection, that is, toss every day.

important news


1 Using the wrapper library

1.1 Add dependencies

The editor has written this effect as a dependency library, and readers can directly add dependencies according to their use. The code is as follows:
github method dependency

  flutter_search_bars:
    git:
      url: https://github.com/zhaolongs/flutter_search_bar.git
      ref: master
  • 1
  • 2
  • 3
  • 4

pub repository dependencies Check latest version

  #search bar
  flutter_search_bars: ^0.0.1
  • 1
  • 2

1.2 Guide package

In the place where the search box SearchBar is used, the package is as follows:

import 'package:flutter_search_bars/flutter_search_bars.dart';
  • 1

1.3 Use

1.3.1 Default size usage
///This is just a search box for display without input 
///The parameter [heroTag] is used for page transition animation tag 
///The parameter clickCallBack is the current search box click event callback 
SearchStaticBar ( 
	heroTag :  "searchStatidBar" , 
	clickCallBack :  ( )  { 
	  NavigatorUtils . pushPage ( context ,  TestPage2 ( ) ) ; 
	} , 
)
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
1.3.2 Specify the size to use
 Container ( 
     width :  120 , 
      ///This is just for displaying the search box without inputting 
      ///The parameter [heroTag] is used for page transition animation tag 
      ///The parameter clickCallBack is the current search box click event callback 
      child :  SearchStaticBar ( 
        heroTag :  "searchStatidBar" , 
        clickCallBack :  ( )  { 
          NavigatorUtils . pushPage ( context ,  TestPage2 ( ) ) ; 
        } , 
      ) , 
    )
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

The operation effect is as follows:
insert image description here

The use case effect is as follows:
insert image description here

Related: Flutter search boxSearchBar