Assalamu’alaikum Sobat Uda dan Uni..

Pada artikel kali ini kita akan membahas bagaimana ara menampilkan atau mendapatkan data dari API yang mana biasa kita sebut sebagai Get Data. Nah, untuk kasus kali ini kita akan menggunakan Public API yaitu dari TheMealDB

Berikut untuk langkah-langkah menampilkan data dari API :

 var meal;
  bool loading = false;
  Future<void> getDetailFood() async {
    setState(() {
      loading = true;
    });
    http.Response res = await http.get(Uri.parse(
        'https://www.themealdb.com/api/json/v1/1/lookup.php?i=${widget
            .idMeal}'));

    setState(() {
      loading = false;
    });
    if (res.statusCode == 200) {
      var detailFood = jsonDecode(res.body);
      if (detailFood['meals'] != null) {
        setState(() {
          meal = detailFood['meals'][0];
        });
      }
    } else {
      print('failed');
    }
  }

Pertama-tama kita perlu membuat sebuah function untuk mengambil data yang mana didalam fuction tersebut terdapat kodingna HTTP dengan method Get. Sebelum itu kita perlu membuat sebuah variable sebagai wadah penyimpanan data yang berhasil didapatkan oleh method Get tadi. Nah sebelum meyimpan data tersebut kita perlu mendecode hasil dari reponse JSON agar bisa tampil pada aplilkasi. Selain itu, pada kodingan diatas agar tidak terjadi error kita tamabahkan kondisi jika StatusCode == 200 atau OK baru lah di simpan data tersebut kedalam variable tadi.
Setelah menambahkan Function tersebut agar fungsi tersebut berjalan kita perlu memanggilnya didalam iniState pada class

  @override
  void initState() {
    getDetailFood();
    super.initState();
  }

Setelah itu kita bisa panggil variabel tadi didalam UI dimana kita akan menempatkan data-data yang kita butuhkan dari API tersebut.

return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        elevation: 0,
        title: Text(
          '${meal['strMeal']}',
          style: TextStyle(
              fontWeight: FontWeight.bold,
              fontFamily: 'Libre',
              color: darkenColor,
              fontSize: 20),
        ),
        backgroundColor: Colors.white,
        centerTitle: true,
        leading: IconButton(
            icon: Icon(
              Icons.arrow_back_ios_rounded,
              color: darkenColor,
            ),
            onPressed: () {
              Navigator.pop(context);
            }),
      ),
      body: loading
          ? Center(
        child: CircularProgressIndicator(),
      )
          : SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Align(
                alignment: Alignment.topCenter,
                child: Container(
                  height: 300,
                  width: double.infinity,
                  child: ClipRRect(
                    borderRadius: BorderRadius.circular(15),
                    child: Image.network(
                      '${meal['strMealThumb']}',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
              SizedBox(
                height: 15,
              ),
              Text(
                '${meal['strMeal']}',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontFamily: 'Libre',
                    color: darkenColor,
                    fontSize: 28),
              ),
              SizedBox(
                height: 15,
              ),
              Row(
                children: [
                  Text(
                    '${meal['strArea']}',
                    style: TextStyle(
                        fontFamily: 'Libre',
                        color: greyColor,
                        fontSize: 18),
                  ),
                  SizedBox(
                    width: 15,
                  ),
                  Text(
                    '${meal['strCategory']}',
                    style: TextStyle(
                        fontFamily: 'Libre',
                        color: greyColor,
                        fontSize: 18),
                  ),
                ],
              ),

Dapat kita lihat cara untuk pemanggilannya bisa dengan menuliskan pada widget sebagai ‘${meal[‘strArea’]}’

Jika kita running maka data yang tampil pada aplikasi seperti berikut:

Sekian artikel kali ini, semoga bermanfaat Semangat Belajar ^ ^