使用 Flutter-Packages 制作过滤器 Widget

Question

我刚刚开始学习 Flutter，这是我在 Whosebug 中的第一个问题！我正在尝试在 Filter-List 包的帮助下编写过滤器小部件。除了 searchfield 之外，我还想有一个 Input 字段，但是通过 Column 或 Container 添加 Textfield 命令，搜索字段也将是 removed.any 建议我如何将 Input-field 添加到以下代码中？或者我应该使用另一个包...？

import 'package:flutter/material.dart';
import 'package:filter_list/filter_list.dart';
    
class FilterPage extends StatefulWidget {
  const FilterPage({Key key, this.allTextList}) : super(key: key);
  final List<String> allTextList;
    
  @override
    _FilterPageState createState() => _FilterPageState();
}
    
class _FilterPageState extends State<FilterPage> {
  @override
    Widget build(BuildContext context) {
      List<String> countList = [
          "A",
          "M",
          "p",
          "kl",
          "D",
          "T",
          "c",
          "ST ",
          "M"
      ];
      return Scaffold(
        appBar: AppBar(
          title: Text("Filter list Page"),
        ),
        body: SafeArea(
          child: FilterListWidget(
            allTextList: countList,
            height: MediaQuery.of(context).size.height,
            hideheaderText: true,
            selectedTextBackgroundColor: Colors.red,
            applyButonTextBackgroundColor: Colors.red,
            allResetButonColor: Colors.grey,
            onApplyButtonClick: (list) {
              Navigator.pop(context, list);
            },
          ),
        ),
      );
  }
}
    
      
<<MAIN Dart>>>
import 'package:flutter/material.dart';
import 'filter.dart';

void main() async {
  runApp(MyApp());
}
    
class MyApp extends StatelessWidget {
  @override
    Widget build(BuildContext context) {
      return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.red,
        ),
        debugShowCheckedModeBanner: false,
        home:FilterPage(),
      );
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
您可以使用 Expanded 包裹 FilterListWidget 和 TextField 并提供 flex
代码片段

body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 4,
              child: FilterListWidget(
                allTextList: countList,
               ...
              ),
            ),
            Expanded(
              flex: 1,
              child: TextField(

工作演示

完整代码

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

class FilterPage extends StatefulWidget {
  const FilterPage({Key key, this.allTextList}) : super(key: key);
  final List<String> allTextList;

  @override
  _FilterPageState createState() => _FilterPageState();
}

class _FilterPageState extends State<FilterPage> {
  @override
  Widget build(BuildContext context) {
    List<String> countList = ["A", "M", "p", "kl", "D", "T", "c", "ST ", "M"];
    return Scaffold(
      appBar: AppBar(
        title: Text("Filter list Page"),
      ),
      body: SafeArea(
        child: Column(
          children: [
            Expanded(
              flex: 4,
              child: FilterListWidget(
                allTextList: countList,
                height: MediaQuery.of(context).size.height,
                hideheaderText: true,
                selectedTextBackgroundColor: Colors.red,
                applyButonTextBackgroundColor: Colors.red,
                allResetButonColor: Colors.grey,
                onApplyButtonClick: (list) {
                  //Navigator.pop(context, list);
                },
              ),
            ),
            Expanded(
              flex: 1,
              child: TextField(
                decoration: InputDecoration(
                    labelText: 'Price'
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: FilterPage());
  }
}

使用 Flutter-Packages 制作过滤器 Widget

make filter Widget with Flutter-Packages

tags

filter

input-field

flutter

flutter-packages