Search code examples
flutterflutter-layoutflutter-dependencies

how to make specific search by user in flutter

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}'),
          ],
        ),
      ),
    ),
  ),
);
  }
}

Solution

  • Demo

    Do you need something like this?

    Demo

    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'),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}