当前位置：网站首页>Open source summer | Three ways to implement search in Flutter

Open source summer | Three ways to implement search in Flutter

2022-08-08 08:46:00 【InfoQ】

示例 1：Use the search form to create a full-screen mode

We want to build a small application has an application bar,A search button on the right.按下此按钮时,There will be a full screen mode dialog.It doesn't suddenly jump out to,But with the fading animation and slide animation（从上到下）.In the circle next to the search field,有一个

取消

按钮,Can be used to shut down mode.In the search field below,We will show some search history（You can add other content,如建议、类别等）.

编码

We by defining an extension ModalRoute 类的名为

FullScreenSearchModalThe class to create a complete model.

main.dart

The full source code and instructions：

// 大前端之旅
// main.dart
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 // remove the debug banner
 debugShowCheckedModeBanner: false,
 title: '大前端之旅',
 theme: ThemeData(
 primarySwatch: Colors.green,
 ),
 home: const KindaCodeDemo(),
 );
 }
}

// this class defines the full-screen search modal
// by extending the ModalRoute class
class FullScreenSearchModal extends ModalRoute {
 @override
 Duration get transitionDuration => const Duration(milliseconds: 500);

 @override
 bool get opaque => false;

 @override
 bool get barrierDismissible => false;

 @override
 Color get barrierColor => Colors.black.withOpacity(0.6);

 @override
 String? get barrierLabel => null;

 @override
 bool get maintainState => true;

 @override
 Widget buildPage(
 BuildContext context,
 Animation<double> animation,
 Animation<double> secondaryAnimation,
 ) {
 return Scaffold(
 body: SafeArea(
 child: Padding(
 padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 15),
 child: Column(
 mainAxisSize: MainAxisSize.min,
 crossAxisAlignment: CrossAxisAlignment.start,
 children: [
 // implement the search field
 Row(
 mainAxisAlignment: MainAxisAlignment.spaceBetween,
 children: [
 Expanded(
 child: TextField(
 autofocus: true,
 decoration: InputDecoration(
 contentPadding: const EdgeInsets.symmetric(
 vertical: 0, horizontal: 20),
 filled: true,
 fillColor: Colors.grey.shade300,
 suffixIcon: const Icon(Icons.close),
 hintText: 'Search 大前端之旅',
 border: OutlineInputBorder(
 borderSide: BorderSide.none,
 borderRadius: BorderRadius.circular(30)),
 ),
 ),
 ),
 const SizedBox(
 width: 10,
 ),
 // This button is used to close the search modal
 TextButton(
 onPressed: () => Navigator.of(context).pop(),
 child: const Text('Cancel'))
 ],
 ),

 // display other things like search history, suggestions, search results, etc.
 const SizedBox(
 height: 20,
 ),
 const Padding(
 padding: EdgeInsets.only(left: 5),
 child: Text('Recently Searched',
 style:
 TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
 ),
 const ListTile(
 title: Text('Flutter tutorials'),
 leading: Icon(Icons.search),
 trailing: Icon(Icons.close),
 ),
 const ListTile(
 title: Text('How to fry a chicken'),
 leading: Icon(Icons.search),
 trailing: Icon(Icons.close),
 ),
 const ListTile(
 title: Text('大前端之旅'),
 leading: Icon(Icons.search),
 trailing: Icon(Icons.close),
 ),
 const ListTile(
 title: Text('Goodbye World'),
 leading: Icon(Icons.search),
 trailing: Icon(Icons.close),
 ),
 const ListTile(
 title: Text('Cute Puppies'),
 leading: Icon(Icons.search),
 trailing: Icon(Icons.close),
 )
 ],
 ),
 ),
 ),
 );
 }

 // animations for the search modal
 @override
 Widget buildTransitions(BuildContext context, Animation<double> animation,
 Animation<double> secondaryAnimation, Widget child) {
 // add fade animation
 return FadeTransition(
 opacity: animation,
 // add slide animation
 child: SlideTransition(
 position: Tween<Offset>(
 begin: const Offset(0, -1),
 end: Offset.zero,
 ).animate(animation),
 child: child,
 ),
 );
 }
}

// This is the main screen of the application
class KindaCodeDemo extends StatelessWidget {
 const KindaCodeDemo({Key? key}) : super(key: key);

 void _showModal(BuildContext context) {
 Navigator.of(context).push(FullScreenSearchModal());
 }

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(title: const Text('大前端之旅'), actions: [
 // this button is used to open the search modal
 IconButton(
 icon: const Icon(Icons.search),
 onPressed: () => _showModal(context),
 )
 ]),
 body: Container(),
 );
 }
}

示例 2：AppBar In the search field（The most common in entertainment applications）

通常,Many entertainment applications（包括 Facebook、Youtube、Spotify Large applications such as）The default does not display the search field,But display the search icon button.按下此按钮时,Will show the search field.

We will make the demo application contains 2 个屏幕（页面）：

HomePage

和

SearchPage

.Users can search by clicking on the icon button moves to search from the home page.The search field will be through the use ofSearchPage 的 AppBar的

title参数来实现.

让我们看看它是如何工作的：

编码

./lib/main.dart

The full source code and instructions：

// main.dart
import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 // Remove the debug banner
 debugShowCheckedModeBanner: false,
 title: '大前端之旅',
 theme: ThemeData(
 primarySwatch: Colors.indigo,
 ),
 home: const HomePage());
 }
}

// Home Page
class HomePage extends StatelessWidget {
 const HomePage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 title: const Text('大前端之旅'),
 actions: [
 // Navigate to the Search Screen
 IconButton(
 onPressed: () => Navigator.of(context)
 .push(MaterialPageRoute(builder: (_) => const SearchPage())),
 icon: const Icon(Icons.search))
 ],
 ),
 );
 }
}

// Search Page
class SearchPage extends StatelessWidget {
 const SearchPage({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return Scaffold(
 appBar: AppBar(
 // The search area here
 title: Container(
 width: double.infinity,
 height: 40,
 decoration: BoxDecoration(
 color: Colors.white, borderRadius: BorderRadius.circular(5)),
 child: Center(
 child: TextField(
 decoration: InputDecoration(
 prefixIcon: const Icon(Icons.search),
 suffixIcon: IconButton(
 icon: const Icon(Icons.clear),
 onPressed: () {
 /* Clear the search field */
 },
 ),
 hintText: 'Search...',
 border: InputBorder.none),
 ),
 ),
 )),
 );
 }
}

示例 3：搜索字段和 SliverAppBar

Search advertising is one of the most important function of many e-commerce application,So they usually show the search field in the form of the most easy to identify,And from the start, take up a lot of space（亚马逊、Shopee 等）.

编码

// main.dart
import 'package:flutter/material.dart';

void main() {
 runApp(const MyApp());
}

class MyApp extends StatelessWidget {
 const MyApp({Key? key}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 return MaterialApp(
 // Remove the debug banner
 debugShowCheckedModeBanner: false,
 title: '大前端之旅',
 theme: ThemeData(
 primarySwatch: Colors.deepPurple,
 ),
 home: const HomePage());
 }
}

class HomePage extends StatefulWidget {
 const HomePage({Key? key}) : super(key: key);

 @override
 State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
 @override
 Widget build(BuildContext context) {
 return Scaffold(
 body: CustomScrollView(
 slivers: [
 SliverAppBar(
 floating: true,
 pinned: true,
 snap: false,
 centerTitle: false,
 title: const Text('大前端之旅'),
 actions: [
 IconButton(
 icon: const Icon(Icons.shopping_cart),
 onPressed: () {},
 ),
 ],
 bottom: AppBar(
 title: Container(
 width: double.infinity,
 height: 40,
 color: Colors.white,
 child: const Center(
 child: TextField(
 decoration: InputDecoration(
 hintText: 'Search for something',
 prefixIcon: Icon(Icons.search),
 suffixIcon: Icon(Icons.camera_alt)),
 ),
 ),
 ),
 ),
 ),
 // Other Sliver Widgets
 SliverList(
 delegate: SliverChildListDelegate([
 const SizedBox(
 height: 400,
 child: Center(
 child: Text(
 'This is an awesome shopping platform',
 ),
 ),
 ),
 Container(
 height: 1000,
 color: Colors.pink,
 ),
 ]),
 ),
 ],
 ),
 );
 }
}

结论

You have already studied in Flutter Implemented in the full screen search box end-to-end example.This way of search is very popular now,You can in many large applications and mobile web site notice it.By looking at the following article,Continue to learn and get more mobile development experience：

原网站

版权声明
本文为[InfoQ]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/220/202208080829153385.html