Question

如何在Firebase数据库中的用户中搜索？

Firebase实时数据库；

--user
 -LwcFew4QDslnm
   -name:"ceyhun er"
 -UIhgda3dscsdlmn
   -name:"ahmet seçkin"

[https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3T1NKb1ltZkdUYzQ/patterns-search-expandable3.png]

我尝试过这种方式，但是数据不可见。感谢您的时间。我测试过的代码；

import 'package:firebase_database/firebase_database.dart';
import 'package:flutter/material.dart';
import 'package:loader_search_bar/loader_search_bar.dart';
enum Example { CALLBACK, LOADER }

 void main() => _runExample(Example.LOADER);

 void _runExample(Example example) {
 runApp(MaterialApp(
 home: example == Example.CALLBACK
    ? CallbackSearchBarPage()
    : LoaderSearchBarPage(),
   debugShowCheckedModeBanner: false,
 ));
}

class CallbackSearchBarPage extends StatefulWidget {
 @override
CallbackSearchBarPageState createState() => CallbackSearchBarPageState();
}

class CallbackSearchBarPageState extends State<CallbackSearchBarPage> {
 String _queryText = '';
 @override

 @override
 Widget build(BuildContext context) {
  return Scaffold(
  appBar: SearchBar(
    iconified: false,
    defaultBar: AppBar(),
    onQueryChanged: (query) => _onQueryChanged(context, query),
    onQuerySubmitted: (query) => _onQuerySubmitted(context, query),
  ),
  body: _body,
  drawer: _drawer,
  );
  }

   Container get _body {
   return Container(
    color: Colors.black12,
    child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Text('Callback example', style: TextStyle(fontSize: 18.0)),
      Container(margin: EdgeInsets.only(top: 8.0)),
      Text(_queryText, style: TextStyle(fontSize: 18.0)),
    ],
  ),
);
}

    _onQueryChanged(BuildContext context, String query) {
    setState(() => _queryText = 'Query changed: $query');
}

    _onQuerySubmitted(BuildContext context, String query) {
     setState(() => _queryText = 'Query submitted!');
   }
  }

    class LoaderSearchBarPage extends StatelessWidget {
     @override
   Widget build(BuildContext context) {
    return Scaffold(
   appBar: SearchBar(
    iconified: true,
    searchItem: SearchItem.menu(
      builder: (_) => PopupMenuItem(
        child: Text("Search  ?"),
        value: "search",
      ),
      gravity: SearchItemGravity.end,
    ),
    defaultBar: _appBar,
    searchHint: 'Search users...',
    loader: QuerySetLoader<User>(
      querySetCall: User.searchUserByQuery,
      itemBuilder: User.buildUserRowItem,
      loadOnEachChange: true,
      animateChanges: true,
    ),
  ),
  body: _body,
  drawer: _drawer,
);
 }

    AppBar get _appBar => AppBar(
    leading: _leadingButton,
    title: Text('Search Loader example'),
 );

   Widget get _body => Container(
   color: Colors.black12,
    child: Center(
    child: Text('HomePage', style: TextStyle(fontSize: 18.0)),
   ),
  );
 }

   Widget get _leadingButton => InkWell(
   borderRadius: BorderRadius.circular(16.0),
   child: Container(
    margin: EdgeInsets.all(12.0),
    child: Icon(Icons.menu, color: Colors.white, size: 24.0),
    ),
    );

    Drawer get _drawer => Drawer();

    class User {
     const User(this.name);

     final String name;

       static List<User> searchUserByQuery(String query) {
  //    Here you have to use the list of users fetched from the database 
     i.e usersList instead of users
     return users
    .where(
        (user) => user.name.toLowerCase().contains(query.toLowerCase()))
    .toList();

   //    like this .....

  //    return usersList
  //        .where(
  //            (user) => 
      user.name.toLowerCase().contains(query.toLowerCase()))
  //        .toList();
  }

     static Widget buildUserRowItem(User user) {
      return Container(
      color: Colors.white,
     child: Column(
       children: [
      _buildUserTile(user),
    ],
  ),
);
}

   static Widget _buildUserTile(User user) {
   return ListTile(
  title: Text(user.name),
);
 }


 //  here the list will be yours List of users fetched from the database

    static const List<User> users = [];

    void vericek(){
     DatabaseReference dataBase = 
      FirebaseDatabase.instance.reference().child("kullanıcılar");
      dataBase.once().then((DataSnapshot snapshot){
       Map<dynamic, dynamic> values = snapshot.value;
       values.forEach((key,values) {
       print(values["ad"]);
       // here insert all the user into a list
        users.add(values["ad"]);

    });

   });

   }

  }

Answer 1

使用此代码从firebase数据库中获取数据，并在获取的数据（即在userList上）上实现搜索功能

List<User> userList = [];
dataBase = FirebaseDatabase.instance.reference().child("user");
dataBase.once().then((DataSnapshot snapshot){
 Map<dynamic, dynamic> values = snapshot.value;
    values.forEach((key,values) {
       print(values["name"]);
       // here insert all the user into a list
       userList.add(values["name"];
    });
 });

使用以下代码作为参考，请参阅注释，以了解使用从数据库中获取的数据的情况。

enum Example { CALLBACK, LOADER }

void main() => _runExample(Example.LOADER);

void _runExample(Example example) {
  runApp(MaterialApp(
    home: example == Example.CALLBACK
        ? CallbackSearchBarPage()
        : LoaderSearchBarPage(),
    debugShowCheckedModeBanner: false,
  ));
}

class CallbackSearchBarPage extends StatefulWidget {
  @override
  CallbackSearchBarPageState createState() => CallbackSearchBarPageState();
}

class CallbackSearchBarPageState extends State<CallbackSearchBarPage> {
  String _queryText = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchBar(
        iconified: false,
        defaultBar: AppBar(),
        onQueryChanged: (query) => _onQueryChanged(context, query),
        onQuerySubmitted: (query) => _onQuerySubmitted(context, query),
      ),
      body: _body,
      drawer: _drawer,
    );
  }

  Container get _body {
    return Container(
      color: Colors.black12,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text('Callback example', style: TextStyle(fontSize: 18.0)),
          Container(margin: EdgeInsets.only(top: 8.0)),
          Text(_queryText, style: TextStyle(fontSize: 18.0)),
        ],
      ),
    );
  }

  _onQueryChanged(BuildContext context, String query) {
    setState(() => _queryText = 'Query changed: $query');
  }

  _onQuerySubmitted(BuildContext context, String query) {
    setState(() => _queryText = 'Query submitted!');
  }
}

class LoaderSearchBarPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: SearchBar(
        iconified: true,
        searchItem: SearchItem.menu(
          builder: (_) => PopupMenuItem(
            child: Text("Search  ?"),
            value: "search",
          ),
          gravity: SearchItemGravity.end,
        ),
        defaultBar: _appBar,
        searchHint: 'Search users...',
        loader: QuerySetLoader<User>(
          querySetCall: User.searchUserByQuery,
          itemBuilder: User.buildUserRowItem,
          loadOnEachChange: true,
          animateChanges: true,
        ),
      ),
      body: _body,
      drawer: _drawer,
    );
  }

  AppBar get _appBar => AppBar(
    leading: _leadingButton,
    title: Text('Search Loader example'),
  );

  Widget get _body => Container(
    color: Colors.black12,
    child: Center(
      child: Text('HomePage', style: TextStyle(fontSize: 18.0)),
    ),
  );
}

Widget get _leadingButton => InkWell(
  borderRadius: BorderRadius.circular(16.0),
  child: Container(
    margin: EdgeInsets.all(12.0),
    child: Icon(Icons.menu, color: Colors.white, size: 24.0),
  ),
);

Drawer get _drawer => Drawer();

class User {
  const User(this.name);

  final String name;

  static List<User> searchUserByQuery(String query) {

//    Here you have to use the list of users fetched from the database i.e usersList instead of users
    return users
        .where(
            (user) => user.name.toLowerCase().contains(query.toLowerCase()))
        .toList();

//    like this .....

//    return usersList
//        .where(
//            (user) => user.name.toLowerCase().contains(query.toLowerCase()))
//        .toList();
  }

  static Widget buildUserRowItem(User user) {
    return Container(
      color: Colors.white,
      child: Column(
        children: [
          _buildUserTile(user),
        ],
      ),
    );
  }

  static Widget _buildUserTile(User user) {
    return ListTile(
      title: Text(user.name),
    );
  }



//  here the list will be yours List of users fetched from the database

  static const List<User> users = [
    User('Derek Robertson', ),
    User('Ethel Mills', ),
    User('Aiden Cruz', ),
    User('Earl Ray',),
    User('Arnold Bailey',),
    User('Evelyn Oliver', ),
    User('Wesley Byrd',),
    User('Andre Stewart', ),
    User('Denise Rose',),
    User('Jane Morrison',),
  ];


}

现在希望这将帮助您将列表与搜索加载器合并

FLUTTER：在Firebase Realtime数据库中的用户中搜索

1 个答案: