how to make specific search by user in flutter

Question

 final String url = 'https://onobang.com/flutter'; // here is my backend code decrlareData.dart class UserDetails { final String id; final String firstName, proVinsi, link, profileUrl, ket, kab; UserDetails({ this.id, this.firstName, this.proVinsi, this.link, this.profileUrl, this.ket, this.kab, }); factory UserDetails.fromJson(Map<String, dynamic> json) { return new UserDetails( id: json['id'], firstName: json['name'], proVinsi: json['provinsi'], profileUrl: "https://onobang.com/daiku/ajaximageupload/manajemen/uploads/" + json['file_name'], ket: json['ket'], link: json['link'], kab: json['kabupaten'], ); } } 

 import 'dart:async'; import 'dart:convert'; import 'package:http/http.dart' as http; import 'package:flutter/material.dart'; import 'package:font_awesome_flutter/font_awesome_flutter.dart'; import 'package:url_launcher/url_launcher.dart'; import 'declareData.dart'; import 'detail.dart'; // here is my fetch data and view with search result, class HomePage extends StatefulWidget { HomePage({Key key}) : super(key: key); @override _HomePageState createState() => new _HomePageState(); } class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin { List<UserDetails> _searchResult = []; List<UserDetails> _userDetails = []; TextEditingController controller = new TextEditingController(); // Get json result and convert it to model. Then add Future<Null> getUserDetails() async { final response = await http.get(url); final responseJson = json.decode(response.body); setState(() { for (Map user in responseJson) { _userDetails.add(UserDetails.fromJson(user)); } }); } @override void initState() { super.initState(); getUserDetails(); } Widget _buildUsersList() { return new ListView.builder( itemCount: _userDetails.length, itemBuilder: (context, index) { return new Card( child: new ListTile( leading: new CircleAvatar( backgroundImage: new NetworkImage( _userDetails[index].profileUrl, ), ), title: new Text(' Nama : ' + _userDetails[index].firstName + ' ' + _userDetails[index].kab), subtitle: new Text('Provinsi : ' + _userDetails[index].proVinsi ), isThreeLine: true, trailing: (IconButton( icon: Icon(Icons.expand_more), ) ), onTap: () { var route = new MaterialPageRoute( builder: (BuildContext context) => new SecondScreen(value: _userDetails[index]), ); Navigator.of(context).push(route); }, ), margin: const EdgeInsets.all(0.0), ); }, ); } //Widget futureBuilder() { //future: Widget _buildSearchResults() { return new ListView.builder( itemCount: _searchResult.length, itemBuilder: (context, i) { return new Card( child: new ListTile( leading: new CircleAvatar( backgroundImage: new NetworkImage( _searchResult[i].profileUrl, ), ), title: new Text(_searchResult[i].firstName + ' || Kab ' + _searchResult[i].kab), subtitle: new Text('Prov : ' + _searchResult[i].proVinsi), onTap: () { var route = new MaterialPageRoute( builder: (BuildContext context) => new SecondScreen(value: _searchResult[i]), ); Navigator.of(context).push(route); }, ), margin: const EdgeInsets.all(0.0), ); }, ); } Widget _buildSearchBox() { return new Padding( padding: const EdgeInsets.all(8.0), child: new Card( child: new ListTile( leading: new Icon(Icons.search), title: new TextField( controller: controller, decoration: new InputDecoration( hintText: 'Search', border: InputBorder.none), onChanged: onSearchTextChanged, ), trailing: new IconButton( icon: new Icon(Icons.cancel), onPressed: () { controller.clear(); onSearchTextChanged(''); }, ), ), ), ); } Widget _buildBody() { return new Column( children: <Widget>[ FlatButton.icon( color: Colors.white, icon: Icon(FontAwesomeIcons.whatsapp), //`Icon` to display label: Text('089xxxx465'), //`Text` to display onPressed: () { launch('https://www.instagram.com/?hl=id'); }, ), new Container( color: Theme.of(context).primaryColor, child: _buildSearchBox()), new Expanded( child: _searchResult.length != 0 || controller.text.isNotEmpty ? _buildSearchResults() : _buildUsersList()), ], ); } @override Widget build(BuildContext context) { return new Scaffold( body: _buildBody(), // body: new RefreshIndicator(child: null, onRefresh: null), resizeToAvoidBottomPadding: true, ); } onSearchTextChanged(String text) async { _searchResult.clear(); if (text.isEmpty) { setState(() {}); return; } _userDetails.forEach((userDetail) { if (userDetail.firstName.toUpperCase().contains(text.toUpperCase()) || userDetail.proVinsi.toUpperCase().contains(text.toUpperCase())|| userDetail.kab.toUpperCase().contains(text.toUpperCase())) _searchResult.add(userDetail); }); setState(() {}); } } 

 import 'package:flutter/material.dart'; import 'declareData.dart'; import 'package:flutube/flutube.dart'; import 'package:flutter/services.dart'; // here is the single post class SecondScreen extends StatefulWidget { final UserDetails value; SecondScreen({Key key, this.value}) : super(key: key); @override _SecondScreenState createState() => _SecondScreenState(); } //detail start class _SecondScreenState extends State<SecondScreen> { int currentPos; String stateText; @override void initState() { currentPos = 0; stateText = "Video not started"; super.initState(); } @override Widget build(BuildContext context) { return new Scaffold( appBar: new AppBar(title: new Text('Profil Ustad')), body: new Container( child: new Center( child: Column( children: <Widget>[ Padding( child: new Text( '${widget.value.firstName}', style: new TextStyle( fontWeight: FontWeight.bold, fontSize: 20.0, ), textAlign: TextAlign.center, ), padding: EdgeInsets.only(top: 20.0), ), /* Padding( //`widget` is the current configuration. A State object's configuration //is the corresponding StatefulWidget instance. child: Image.network('${widget.value.profileUrl}'), padding: EdgeInsets.all(12.0), ),*/ Padding( child: new Text( 'Nama : ${widget.value.firstName}', style: new TextStyle(fontWeight: FontWeight.bold), textAlign: TextAlign.left, ), padding: EdgeInsets.all(10.0), ), Padding( child: new Text( 'PROVINSI : ${widget.value.proVinsi}', style: new TextStyle(fontWeight: FontWeight.bold), textAlign: TextAlign.left, ), padding: EdgeInsets.all(0.0), ), Padding( child: new Text( 'Ket : ${widget.value.ket}', style: new TextStyle(fontWeight: FontWeight.bold), textAlign: TextAlign.justify, ), padding: EdgeInsets.all(10.0), ), ], ), ), ), ); } } 

i'm trying to make a specific search in flutter, the case is, i'd like user can choose option that was, province and district , than after user select the specific location they want, user click a button than we fetch data from mysql json.so i wish i can change value in url variable than i can get specific data from my json.

final String url = 'https://onobang.com/flutter/index.php?'+'province='

 import 'package:flutter/material.dart'; void main() { runApp(new MaterialApp( title: "Para Dai", home: new DropDown(), )); } import 'package:flutter/material.dart'; class DropDown extends StatefulWidget { DropDown() : super(); final String title = "DropDown Demo"; @override DropDownState createState() => DropDownState(); } class Provinces { int id; String name; Provinces(this.id, this.name); static List<Provinces> getCompanies() { return <Provinces>[ Provinces(1, 'Central Java'), Provinces(2, 'East kalimantan'), Provinces(3, 'East java'), Provinces(4, 'Bali'), Provinces(5, 'Borneo'), ]; } } class DropDownState extends State<DropDown> { // List<Provinces> _provinceses = Provinces.getCompanies(); List<DropdownMenuItem<Provinces>> _dropdownMenuItems; Provinces _selectedProvinces; @override void initState() { _dropdownMenuItems = buildDropdownMenuItems(_provinceses); _selectedProvinces = _dropdownMenuItems[0].value; super.initState(); } // here the url i wish can dynamicly edit by user input final String url = 'https://onobang.com/flutter/index.php?'+'province='_selectedProvinsi.name+'district'some.district; List<DropdownMenuItem<Provinces>> buildDropdownMenuItems(List provinceses) { List<DropdownMenuItem<Provinces>> items = List(); for (Provinces province in provinceses) { items.add( DropdownMenuItem( value: province, child: Text(province.name), ), ); } return items; } onChangeDropdownItem(Provinces selectedProvinces) { setState(() { _selectedProvinces = selectedProvinces; }); } @override Widget build(BuildContext context) { return new MaterialApp( debugShowCheckedModeBanner: false, home: new Scaffold( appBar: new AppBar( title: new Text("DropDown Button Example"), ), body: new Container( child: Center( child: Column( crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text("Select a province"), SizedBox( height: 20.0, ), DropdownButton( value: _selectedProvinces, items: _dropdownMenuItems, onChanged: onChangeDropdownItem, ), SizedBox( height: 20.0, ), Text('Selected: ${_selectedProvinces.name}'), ], ), ), ), ), ); } } 

Answer 1

Demo

do you need something like this ?

You can build it locally using this repo Github

What to Do

1. Make District class that similiar to Province
2. Initiate Dropdown for District
3. Set initial value for selectedDistrict
4. Lastly, modify URL before calling setState

Full Code

import 'package:flutter/material.dart';

class DropDown extends StatefulWidget {
  DropDown() : super();

  final String title = "DropDown Demo";

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

class Province {
  int id;
  String name;

  Province(this.id, this.name);

  static List<Province> getProvinceList() {
    return <Province>[
      Province(1, 'Central Java'),
      Province(2, 'East kalimantan'),
      Province(3, 'East java'),
      Province(4, 'Bali'),
      Province(5, 'Borneo'),
    ];
  }
}

// ADD THIS
class District {
  int id;
  String name;

  District(this.id, this.name);

  static List<District> getDistrictList() {
    return <District>[
      District(1, 'Demak'),
      District(2, 'Solo'),
      District(3, 'Sidoarjo'),
      District(4, 'Bandung'),
    ];
  }
}

class DropDownState extends State<DropDown> {

  String finalUrl = '';

  List<Province> _provinces = Province.getProvinceList();
  List<DropdownMenuItem<Province>> _dropdownMenuItems;
  Province _selectedProvince;

  // ADD THIS
  List<District> _disctricts = District.getDistrictList();
  List<DropdownMenuItem<District>> _dropdownMenuDistricts;
  District _selectedDistrict;

  @override
  void initState() {
    _dropdownMenuItems = buildDropdownMenuItems(_provinces);
    _dropdownMenuDistricts = buildDropdownDistricts(_disctricts); // Add this
    _selectedProvince = _dropdownMenuItems[0].value;
    _selectedDistrict = _dropdownMenuDistricts[0].value; // Add this
    super.initState();
  }

  List<DropdownMenuItem<Province>> buildDropdownMenuItems(List provinceses) {
    List<DropdownMenuItem<Province>> items = List();
    for (var province in provinceses) {
      items.add(
        DropdownMenuItem(
          value: province,
          child: Text(province.name),
        ),
      );
    }
    return items;
  }

  // ADD THIS
  List<DropdownMenuItem<District>> buildDropdownDistricts(List<District> districts) {
    List<DropdownMenuItem<District>> items = List();
    for (var district in districts) {
      items.add(
        DropdownMenuItem(
          value: district,
          child: Text(district.name),
        ),
      );
    }
    return items;
  }

  onChangeDropdownItem(Province newProvince) {
    // Add this
    final String url = 'https://onobang.com/flutter/index.php?province=${newProvince.name}&district=${_selectedDistrict.name}';
    setState(() {
      _selectedProvince = newProvince;
      finalUrl = url; // Add this
    });
  }
  onChangeDistrict(District newDistrict) {
    // Add this
    final String url = 'https://onobang.com/flutter/index.php?province=${_selectedProvince.name}&district=${newDistrict.name}';
    setState(() {
      _selectedDistrict = newDistrict;
      finalUrl = url; // Add this
    });
  }

  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("DropDown Button Example"),
        ),
        body: new Container(
          child: Center(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text("Select a province"),
                SizedBox(
                  height: 20.0,
                ),
                DropdownButton(
                  value: _selectedProvince,
                  items: _dropdownMenuItems,
                  onChanged: onChangeDropdownItem,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text('Selected: ${_selectedProvince.name}'),

                SizedBox(
                  height: 20.0,
                ),
                Text("Select a district"),
                SizedBox(
                  height: 20.0,
                ),
                // Add this
                DropdownButton(
                  value: _selectedDistrict,
                  items: _dropdownMenuDistricts,
                  onChanged: onChangeDistrict,
                ),
                SizedBox(
                  height: 20.0,
                ),
                Text('Selected: ${_selectedDistrict.name}'),
                SizedBox(
                  height: 30.0,
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: Text('$finalUrl'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}