ServicePetrolPage.dart

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'dart:async';

class ServicePetrolPage extends StatefulWidget {
//  HomePage({Key key, this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

//  final String title;

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

class _ServicePetrolPage extends State<ServicePetrolPage> {
  int _counter = 0;
  String dropdownValue1 = "Shell";
  String dropdownValue2 = "Nearest";
  String dropdownValue3 = "Restaurant";

 FetchPetrolList() async {
    var data = await http.get("http://157.230.131.4/gda-api-dev/petrol.php");
    var jsonData = json.decode(data.body);

    List<PetrolItem> petrolList = [];

    for (var u in jsonData) {
      PetrolItem petrol = PetrolItem(u["logo"], u["location"], u["distance"], u["price"], u["facilities"]);
      petrolList.add(petrol);
      print(petrol.logo+" "+petrol.location+" "+petrol.distance+" "+petrol.price+" "+petrol.facilities);
    }
  }

  DataRow getDataRow(data) {
    return DataRow(
      cells: <DataCell>[
        DataCell(Text(data["logo"])),
        DataCell(Text(data["location"])),
        DataCell(Text(data["distance"])),
        DataCell(Text(data["price"])),
        DataCell(Text(data["facilities"]))
      ],
    );
  }

  final List<Map<String, String>> listOfPetrol = [
    {"logo": "assets/images/shell.jpg", "location": "Johnson Road 1235", "distance": "0.2 KM", "price":"\$12.45", "facilities":"ATM, Restaurant"},
    {"logo": "assets/images/sinopec.jpg", "location": "Hennessy Road", "distance": "0.5 KM", "price":"\$10.00", "facilities":"Toilet"},
    {"logo": "assets/images/shell.jpg", "location": "Lockhart Rd", "distance": "0.9 KM", "price":"\$11.20", "facilities":"ATM"}
  ];

  void _incrementCounter() {
    setState(() {
      // This call to setState tells the Flutter framework that something has
      // changed in this State, which causes it to rerun the build method below
      // so that the display can reflect the updated values. If we changed
      // _counter without calling setState(), then the build method would not be
      // called again, and so nothing would appear to happen.
      _counter++;
    });
  }

  FetchPetrolList() async {
    var data = await http.get("http://157.230.131.4/gda-api-dev/petrol.php");
    var jsonData = json.decode(data.body);

    List<PetrolItem> petrolList = [];

    for (var u in jsonData) {
      PetrolItem petrol = PetrolItem(u["logo"], u["location"], u["distance"], u["price"], u["facilities"]);
      petrolList.add(petrol);
      print(petrol.logo+" "+petrol.location+" "+petrol.distance+" "+petrol.price+" "+petrol.facilities);
    }
  }

  @override
  void initState() {
    FetchPetrolList();
  }

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text('Petrol'),
      ),
      body: Container(
          child: SafeArea(
              child: Padding(
                padding: const EdgeInsets.all(16.0),
                child:
                Column(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <
                    Widget>[
                  SizedBox(
                    height: 120,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: <Widget>[
                        SizedBox(
                          child: Row(
                            children: <Widget>[
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 3),
                                  child: DropdownButton<String>(
                                      value: dropdownValue1,
                                      onChanged: (String newValue) {
                                        setState(() {
                                          dropdownValue1 = newValue;
                                        });
                                      },
                                      items: <String>[
                                        'Shell',
                                        'Esso',
                                        'Castrol',
                                        'Four'
                                      ].map<DropdownMenuItem<String>>((String value) {
                                        return DropdownMenuItem<String>(
                                          value: value,
                                          child: Text(value),
                                        );
                                      }).toList(),
                                      isExpanded: false,
                                      hint: Text("Brand")),
                                ),
                              ),
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 3),
                                  child: DropdownButton<String>(
                                      value: dropdownValue2,
                                      onChanged: (String newValue) {
                                        setState(() {
                                          dropdownValue2 = newValue;
                                        });
                                      },
                                      items: <String>[
                                        'Nearest',
                                        'Farthest'
                                      ].map<DropdownMenuItem<String>>((String value) {
                                        return DropdownMenuItem<String>(
                                          value: value,
                                          child: Text(value),
                                        );
                                      }).toList(),
                                      hint: Text("Location")),
                                ),
                              ),
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(horizontal: 3),
                                  child: DropdownButton<String>(
                                      value: dropdownValue3,
                                      onChanged: (String newValue) {
                                        setState(() {
                                          dropdownValue3 = newValue;
                                        });
                                      },
                                      items: <String>[
                                        'ATM',
                                        'Restaurant',
                                        'Toilet'
                                      ].map<DropdownMenuItem<String>>((String value) {
                                        return DropdownMenuItem<String>(
                                          value: value,
                                          child: Text(value),
                                        );
                                      }).toList(),
                                      hint: Text("Facilities")),
                                ),
                              ),
                            ],
                          ),
                        ),
                        new Text("All brands > Wan Chai Stn > Cheapest",
                            style: TextStyle(fontWeight: FontWeight.bold)),
                      ],
                    ),
                  ),
                  DataTable(
                    columns: [
                      DataColumn(label: Text('Logo')),
                      DataColumn(label: Text('Location')),
                      DataColumn(label: Text('Distance')),
                      DataColumn(label: Text('Price')),
                      DataColumn(label: Text('Facilities')),
                    ],
                    rows:
                    listOfPetrol
                        .map(
                      ((element) => DataRow(
                        cells: <DataCell>[
                          DataCell(Image.asset(element["logo"])),
                          DataCell(Text(element["location"])),
                          DataCell(Text(element["distance"])),
                          DataCell(Text(element["price"])),
                          DataCell(Text(element["facilities"])),
                        ],
                      )),
                    )
                        .toList(),
                  ),
                ]),
              ))),
    );
  }

  BoxDecoration myBottomBorder() {
    return BoxDecoration(
      border: Border(
        bottom: BorderSide(
          color: Colors.black,
          width: 1.5,
        ),
      ),
    );
  }
}

class PetrolItem {
  final String logo;
  final String location;
  final String distance;
  final String price;
  final String facilities;

  PetrolItem(this.logo, this.location, this.distance, this.price, this.facilities);

}