flutter - 如何在 flutter Bottom Sheet 中过滤搜索

标签 flutter search filter flutter-layout bottom-sheet

我正在尝试过滤 flutter Bottom Sheet 中的位置,但当我在移动键盘上的“完成”按钮后搜索某些内容时,它无法正常工作,它会显示结果,请检查以下代码并指导我。谢谢

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:mobihub_2/services/all_cities.dart';

class ProfileScreen extends StatefulWidget {
  final String fullname;
  final String email;
  final String location;
  final String gender;

  const ProfileScreen({
    Key? key,
    required this.fullname,
    required this.email,
    required this.location,
    required this.gender,
  }) : super(key: key);

  @override
  State<ProfileScreen> createState() => _ProfileScreenState();
}

class _ProfileScreenState extends State<ProfileScreen> {
  var textC= TextEditingController();

  bool loading = false;
  List<String> listOfCities =[];
  List<String> allCities =[
    "All Cities",
    //Popular Cities
    "Rawalpindi",
    "Islamabad",
    //Other Cities
    "Abbottabad",
    "Attock",
    "Bahawalpur",
    "Chakwal",
    "D.G.Khan",
    "Faisalabad",
    "Gujranwala",
    "Gujrat",
    "Hyderabad",

    "Jhelum",
    "Karachi",
    "Lahore",
    "Multan",
    "Mardan",
    "Mandi bahauddin",
    "Mansehra",
    "Mirpur A.K.",
    "Nowshera",
    "Okara",
    "Peshawar",
    "Quetta",

    "Rahim Yar Khan",
    "Sialkot",
    "Sargodha",
    "Sahiwal",
    "Swabi",
    "Sheikhupura",
    "Wah cantt",

    // City Area of Rawalpindi:
    "Afshan Colony",
    "Air Force Housing Society",
    "Airport Housing Society",
    "Akalgarh",
    "Adiala Road",
    "AWT Housing Scheme",
    "Affandi Colony",
    "Al Jannat Garden",
    "Al-Haram City",
    "Allama Iqbal Colony",
    "Army Officers Colony",
    "Asghar MBuy Road",
    "Asia Housing Scheme",
    "Askari 1",
    "Askari 2",
    "Askari 3",
    "Askari 4",
    "Askari 5",
    "Askari 9",
    "Askari 10",
    "Askari 12",
    "Askari 13",
    "Askari-7",
    "Askari-11",
    "Askari-14",
    "Awan Town",
    "Ayub National Park",
    "Bahria Town Rawalpindi",
    "Babar Colony",
    "Bank Road",
    "Bankers Colony",
    "Banni Chowk",
    "Bostan Road",
    "Burma Town",
    "Buyama Iqbal Colony",
    "Chaklala",
    "Chaklala Scheme",
    "Chakri Road",
    "Chandni Chowk",
    "Caltex Road",
    "Cantt",
    "Chak Beli Khan",
    "Chakbeli Road",
    "Chanman Abad",
    "Chaudhary Jan Colony",
    "City Farm Houses",
    "City Villas",
    "Committee Chowk",
    "Cricket Stadium Road",
    "Danial Town",
    "Defence Colony",
    "Defence Road",
    "Dhamyal Road",
    "Dheri Hassanabad",
    "Dhok Chiragh Din",
    "Dhok Elahi Baksh",
    "Dhok Kala Khan",
    "Dhok Kashmirian",
    "Dhok Mangtal",
    "Dhok Paracha",
    "Dhok Piran Faqiran",
    "Dhok Sayedan Road",
    "Dhoke Hameeda",
    "Engineering Cooperative Housing Scheme",
    "Faizabad",
    "Farooq-e-Azam Road",
    "Fazaia Colony",
    "Fazal Town",
    "G.H.Q",
    "Gawal Mandi",
    "Ghauri Town",
    "Ghousia Colony",
    "Girja Road",
    "Gulistan Colony",
    "Gulrez Housing Scheme",
    "Gulshan Abad",
    "Gulshan Dadan",
    "Gulshan-e-Kashmir",
    "Gulshan-e-Khudadad",
    "Gulzar-e-Quaid Housing Society",
    "Hakim Muhammad Ajmal Khan Road",
    "Harley Street",
    "High Court Road",
    "Jahangir Road",
    "Janjua Town",
    "Jhanda Chichi",
    "Judicial Colony",
    "KRL Road",
    "Kahuta Road",
    "Kallar Syedan",
    "Kamala Abad",
    "Karor Lal Esan",
    "Kashmir Model Town",
    "Khanna Pul",
    "Khayaban-e-Sir-Syed",
    "Khurram Colony",
    "Kurri Road",
    "Lalazar",
    "Lalkurti",
    "Liaquat Bagh",
    "Main GT road",
    "Mall Road",
    "Mandra",
    "Marir",
    "Media Town",
    "Millat Colony",
    "Misryal Road",
    "Mohalla Banni",
    "Mohan Pura",
    "Morgah",
    "Mughalabad",
    "Mulpur",
    "Munawar Colony",
    "Murree Road",
    "Muslim Town",
    "Nanak Pura",
    "National Garden Housing Scheme",
    "National Town",
    "New Airport Town",
    "New Lalazar",
    "Ojhary Camp",
    "Old Punjab House",
    "PAF Residential Area",
    "PIA Colony",
    "PWD Colony",
    "Pakistan Town",
    "Pandora",
    "Peshawar Road",
    "Pir Wadhai",
    "Police Foundation Housing Scheme",
    "Quaid-e-Azam Colony",
    "Qurtaba City",
    "RCCI",
    "Race Course",
    "Rail View Housing Society",
    "Railway Workshop Road",
    "Raja Bazar",
    "Range Road",
    "Ranial",
    "Rawat Industrial Estate",
    "Saddar",
    "Satellite Town",
    "Sadiq Abad",
    "Safari Valley",
    "Safari View Residencia",
    "Saidpur Road",
    "Samarzar Housing Society",
    "Sangar Town",
    "Shah Khalid Colony",
    "Shaheen Town",
    "Shakrial",
    "Shalley Valley",
    "Shams Abad",
    "Sher Zaman Colony",
    "Supreme Court Employees Housing Society",
    "Swan Garden",
    "T Colony",
    "Takht Pari",
    "Tanch Bhata",
    "Tulsa Road",
    "Westridge",
    "Walait Homes",
    "Waris Khan",
    "Zeeshan Colony",

    // City Area of Islamabad:
    "7th Avenue",
    "9th Avenue",
    "AGHOSH",
    "AWT",
    "Aabpara Market",
    "Abbas Pura",
    "Abdullah Garden",
    "Agha Shahi Avenue",
    "Ahmed Town",
    "Airline Avenue",
    "Airport Enclave",
    "Akbar Town",
    "Alhamra Avenue",
    "AliPur",
    "Alipur Farash",
    "Anchorage Naval Housing scheme",
    "Angoori Road",
    "Arsalan Town",
    "Atomic Energy Employee Society",
    "Bahria Town",
    "Blue Area",
    "B-17",
    "Bahria Enclave",
    "Bani Gala",
    "Bhara kahu",
    "Bilal Town",
    "British Homes Colony",
    "Burma Town",
    "C-15",
    "C-16",
    "C-18",
    "C-19",
    "CBR Town",
    "Cantt",
    "Canyon Views",
    "Capital Enclave",
    "Capital Territory",
    "Chak Shahzad",
    "Chaklala Scheme",
    "Chatha Bakhtawar",
    "Chistiya Mohalla",
    "Civic Centre",
    "Civil Line",
    "Club Road",
    "Commoners Flower Velley",
    "Constitution Avenue",
    "D-12",
    "D-13",
    "D-14",
    "D-16",
    "D-17",
    "D-18",
    "DHA Defence",
    "DHA Valley",
    "Darussalam Co-Op Society",
    "Defence Phase-2",
    "Defence Phase-I",
    "Dhok Abdullah",
    "Dhok Chaudhrian",
    "Dhok Ghulam Mustafa",
    "Dhok Jumma",
    "Dhok Muqarab",
    "Diplomatic Enclave",
    "Dohk Ferdos",
    "E-6",
    "E-7",
    "E-8",
    "E-11",
    "E-12",
    "E-13",
    "E-14",
    "E-16",
    "E-17",
    "E-18",
    "E-19",
    "Eden Life Islamabad",
    "Embassy Road",
    "Engineering Co-operative Housing (ECHS)",
    "Engineers Cooperative Housing Society",
    "F-5",
    "F-6",
    "F-7",
    "F-8",
    "F-9",
    "F-13",
    "F-14",
    "F-15",
    "F-16",
    "F-10",
    "F-11",
    "F-17",
    "FECHS",
    "FOECHS-ForeignOfficeEmployeesSociety",
    "Faisal Town-F-18",
    "Fateh Jhang",
    "Fatima Town",
    "G-5",
    "G-6",
    "G-7",
    "G-8",
    "G-9",
    "G-10",
    "G-11",
    "G-12",
    "G-13",
    "G-14",
    "G-15",
    "G-16",
    "G-17",
    "G.H.Q Islamabad",
    "G.T Road Rawalpindi",
    "Ghauri Town",
    "Graceland Housing",
    "Green Avenue",
    "Gulberg",
    "Gulshan Town",
    "Gulzar Housing Scheme",
    "H-11",
    "H-12",
    "H-13",
    "H-15",
    "H-8",
    "H-9",
    "Humak",
    "I-9",
    "I-10",
    "I-8",
    "I-11",
    "I-12",
    "I-13",
    "I-14",
    "I-15",
    "I-16",
    "I-17",
    "I.J.P Road",
    "Islamabad Airport",
    "Islamabad Cooperative Housing",
    "Islamabad Enclave",
    "Islamabad Expressway",
    "Islamabad Highway",
    "Islamabad View VBuyey",
    "J and K Zone-V",
    "Jada",
    "Jamil Town",
    "Japan Road",
    "Jeddah Town",
    "Jhang Syedan",
    "Jhangi Syedan",
    "Jinnah Avenue",
    "Jinnah Garden",
    "Jinnah Super Market",
    "Jinnah Town",
    "Judicial Town",
    "Kahuta",
    "Kahuta Triangle Industrial Area",
    "Kala Gujran",
    "Karakoram Diplomatic Enclave",
    "Kashmir Colony",
    "Kashmir Highway",
    "Khayaban-e-Iqbal",
    "Koral Town",
    "Korang Town",
    "Kuri Model Town",
    "Lawyers Society",
    "Lehtarar Road",
    "Luqman Hakeem Road",
    "Machine Mohalla",
    "Mahandi Shah",
    "Malot",
    "Malpur",
    "MargBuya VBuyey-C-12",
    "Margalla Town",
    "Melody Market",
    "Ministry of Commerce Society",
    "Mohallah Mouhammadi Chowk",
    "Mohallah Shadab Road",
    "Motorway City",
    "Multi Resencia&Orchards",
    "Mumtaz City",
    "Muree Expressway",
    "Muzafar Town",
    "NHA Housing Society",
    "National Cooperative Housing Society",
    "National Police Foundation",
    "Naval Anchorage",
    "Naval Farms",
    "Nawaz Shaheed Colony",
    "New Airport Town",
    "New Shakrial",
    "O-9",
    "OPF VBuyey",
    "Orchard Scheme",
    "P.W.D Housing Scheme",
    "PAEC Employees Cooperative Housing Society",
    "PAF Tarnol",
    "PECHS",
    "PTV Colony",
    "Pakistan Housing Society",
    "Pakistan Town",
    "Park Enclave CDA",
    "Park Road",
    "Peraghab",
    "Pir Sohawa",
    "Pira Ghaib",
    "Ram Deen Bazar",
    "Rawal Dam",
    "Rawal Town",
    "Rawat",
    "River Garden",
    "Roshan Pakistan Scheme",
    "Royal City",
    "Sahil Colony",
    "Sangjani",
    "Sarai Alamgir",
    "Sawan Garden",
    "Shah Buyah Ditta",
    "Shah Dara",
    "Shamali Mohalla",
    "Shehzad Town",
    "Sihala",
    "Simly Dam Road",
    "Soan Garden",
    "Sohan Valley",
    "Spring Valley",
    "Sultan Pura",
    "Super Market",
    "Taramrri",
    "Tarlai",
    "Tarnol",
    "Thanda Pani",
    "The Springs",
    "Top City",
    "University Town",
    "Wapda Town",
    "Zaraj Housing Scheme",
    "Zero Point",



  ];


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
        backgroundColor: Color(0xFFFFDC3D),
        elevation: 0,
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.only(left: 10, right: 10, top: 10, bottom: 30),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              // CircleAvatar(
              //   radius: 50,
              //   backgroundColor: Colors.red,
              //   backgroundImage: AssetImage(''),
              // ),
              TextFormField(
                initialValue: widget.fullname,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  suffixIcon: Icon(Icons.edit_outlined),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                initialValue: widget.email,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.email_outlined),
                  suffixIcon: Icon(Icons.edit_outlined),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(

                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.location_on_outlined),
                  hintText: 'location',
                  suffixIcon: IconButton(
                    onPressed: () {
                      showModalBottomSheet(
                          context: context,
                          isScrollControlled: true,
                          builder: (context) {
                            return  Container(
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children:[
                                  SizedBox(height: 20,),
                                  Container(
                                    height:40,
                                    decoration: BoxDecoration(
                                      color: Colors.grey,
                                      borderRadius: BorderRadius.circular(10),
                                    ),
                                    child: TextFormField(
                                      controller: textC,
                                      onChanged:(value){
                                        setState(() {
                                          listOfCities = allCities.where((element) => element.toLowerCase().contains(value.toLowerCase())).toList();
                                        });
                                      },
                                      textAlign: TextAlign.center,

                                      decoration: InputDecoration(
                                        hintText: 'search city',
                                        hintStyle: TextStyle(fontFamily: 'Lato1'),
                                        border: OutlineInputBorder(
                                          borderSide: BorderSide.none,
                                        ),

                                      ),

                                    ),
                                  ),
                                  Expanded(child: Container(
                                    child:textC.text.isNotEmpty && listOfCities.isEmpty?Column(
                                      children: [
                                        Icon(Icons.search_off),
                                        Text('no result found'),
                                      ],
                                    ):ListView.builder(
                                        itemCount: textC.text.isNotEmpty?listOfCities.length:allCities.length,
                                        itemBuilder: (context,index){
                                          return
                                            Text(textC.text.isNotEmpty?listOfCities[index]:allCities[index]);

                                        }),
                                  ))


                                ],
                              ),
                            );
                          });
                    },
                    icon: Icon(CupertinoIcons.chevron_down),
                  ),
                ),
              ),
              SizedBox(
                height: 20,
              ),
              TextFormField(
                initialValue: widget.gender,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.person),
                  hintText: 'Gender',
                  suffixIcon: IconButton(
                    onPressed: () {},
                    icon: Icon(CupertinoIcons.chevron_down),
                  ),
                ),
              ),
              SizedBox(
                height: 50,
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  OutlinedButton(
                      onPressed: () {},
                      child: Text(
                        'Cancel',
                        style: TextStyle(color: Colors.black),
                      )),
                  OutlinedButton(
                      style: TextButton.styleFrom(
                          backgroundColor: Color(0xFFFFDC3D)),
                      onPressed: () {},
                      child: Text('Save')),
                ],
              )
            ],
          ),
        ),
      ),
      backgroundColor: Colors.white,
    );
  }
}

等待您的宝贵意见希望大家能解决我的问题,请运行以下代码并检查确切的问题是什么。

最佳答案

尝试下面的代码希望对您有所帮助。

 return Scaffold(
  appBar: AppBar(title: Text(title)),
  body: const Center(
    child: Text('My Page!'),
  ),
  drawer: Drawer(
    child: ListView(
      padding: EdgeInsets.zero,
      children: [
        const DrawerHeader(
          decoration: BoxDecoration(
            color: Colors.blue,
          ),
          child: Text('Drawer Header'),
        ),
        ExpansionTile(
          title: Text('Heading'),
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Align(
                alignment: Alignment.topLeft,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text('subHeading1'),
                    Text('subHeading2')
                  ],
                ),
              ),
            ),
          ],
        ),
        ExpansionTile(
          title: Text('Heding'),
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 16.0),
              child: Align(
                alignment: Alignment.topLeft,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  mainAxisSize: MainAxisSize.min,
                  children: <Widget>[
                    Text('subHeading1'),
                    Text('subHeading2')
                  ],
                ),
              ),
            ),
          ],
        ),
      ],
    ),
  ),
);

或者您可以使用multilevel_drawer hereexpandable_tree_menu here

您的结果-> enter image description here

关于flutter - 如何在 flutter Bottom Sheet 中过滤搜索,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/70936494/

相关文章:

flutter - 如何在 Flutter 中将小部件与另一个小部件对齐?

error-handling - 如何在 flutter 中使用 bloc 模式进行错误处理?

flutter - flutter 中的信号量

python - 是否有针对 python 的开放搜索解决方案?

sql - 基于非字母首字符过滤 SQL 查询

c++ - 在类中制作过滤器

haskell : Filtering a list of strings

flutter - 如何更改位于自定义底部应用栏中心的 FAB 周围的颜色?

php - parsing_exception:没有为[已过滤]注册任何[查询]

algorithm - 根据属性权重查找对象