我如何在 flutter 中自定义 flappy_search_bar

Question

每当我在搜索栏中输入一个值时，我想从可用列表中匹配它，例如，如果这是我的列表 List fooList = ['one', 'two', 'three', 'four', 'five'];我在搜索栏中输入 e 它应该列出其中包含 e 的那些项目。我该怎么做，请任何人帮助。

class _HomeState extends State<HeaderWithSearchBox1> {
    
      final SearchBarController<Post> _searchBarController = SearchBarController();
      
    
  Future<List<Post>> _getALlPosts(String text) async {
    List<Post> posts = [];

    var random = new Random();
    for (int i = 0; i < 10; i++) {
      posts
          .add(Post("$text $i", "body random number : ${random.nextInt(100)}"));
    }
    return posts;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SearchBar<Post>(
          minimumChars: 1,
          searchBarPadding: EdgeInsets.symmetric(horizontal: 10),
          headerPadding: EdgeInsets.symmetric(horizontal: 10),
          listPadding: EdgeInsets.symmetric(horizontal: 10),
          onSearch: _getALlPosts,
          searchBarController: _searchBarController,
          placeHolder: Center(
              child: Text(
                "PlaceHolder",
                style: TextStyle(fontSize: 30),
              )),
          cancellationWidget: Text("Cancel"),
          emptyWidget: Text("empty"),
          onCancelled: () {
            print("Cancelled triggered");
          },
          mainAxisSpacing: 10,
          onItemFound: (Post post, int index) {
            return Container(
              color: Colors.lightBlue,
              child: ListTile(
                title: Text(post.title),
                isThreeLine: true,
                subtitle: Text(post.body),
                onTap: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) => Detail()));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class Detail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SafeArea(
        child: Center(child: Text("Detail", style: TextStyle(fontSize: 30),)),
      ),
    );
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
您使用 where 过滤 fooList 并使用 contains
代码片段

 Future<List<Post>> _getALlPosts(String text) async {
    List<Post> posts = fooList
        .where((element) =>
            element.title.contains(text) || element.body.contains(text))
        .toList();
    return posts;
  }

工作演示

完整代码

import 'dart:math';

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Home(),
    );
  }
}

class Post {
  final String title;
  final String body;

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

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  final SearchBarController<Post> _searchBarController = SearchBarController();
  bool isReplay = false;

  List<Post> fooList = [
    Post('one', '1'),
    Post('two', '2'),
    Post('three', '3'),
    Post('four', '4'),
    Post('five', '5')
  ];

  Future<List<Post>> _getALlPosts(String text) async {    
    List<Post> posts = fooList
        .where((element) =>
            element.title.contains(text) || element.body.contains(text))
        .toList();    
    return posts;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SearchBar<Post>(
          minimumChars: 1,
          searchBarPadding: EdgeInsets.symmetric(horizontal: 10),
          headerPadding: EdgeInsets.symmetric(horizontal: 10),
          listPadding: EdgeInsets.symmetric(horizontal: 10),
          onSearch: _getALlPosts,
          searchBarController: _searchBarController,
          placeHolder: Center(
              child: Text(
            "PlaceHolder",
            style: TextStyle(fontSize: 30),
          )),
          cancellationWidget: Text("Cancel"),
          emptyWidget: Text("empty"),
          onCancelled: () {
            print("Cancelled triggered");
          },
          mainAxisSpacing: 10,
          onItemFound: (Post post, int index) {
            return Container(
              color: Colors.lightBlue,
              child: ListTile(
                title: Text(post.title),
                isThreeLine: true,
                subtitle: Text(post.body),
                onTap: () {
                  Navigator.of(context)
                      .push(MaterialPageRoute(builder: (context) => Detail()));
                },
              ),
            );
          },
        ),
      ),
    );
  }
}

class Detail extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.arrow_back),
              onPressed: () => Navigator.of(context).pop(),
            ),
            Text("Detail"),
          ],
        ),
      ),
    );
  }
}

我如何在 flutter 中自定义 flappy_search_bar

How do i customize flappy_search_bar in flutter

flutter

flutter-test

flutter-dependencies

flutter-layout

flutter-animation