main.dart

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:parsingdata_flutter/detail_page.dart';
import 'package:parsingdata_flutter/model/model_users.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
         primarySwatch: Colors.blue,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<ModelUsers> listModel = [];
  var loading = false;
  Future<Null> getData() async{
    setState(() {
      loading = true;
    });

    final responseData = await http.get("https://jsonplaceholder.typicode.com/users");
    if(responseData.statusCode == 200){
      final data = jsonDecode(responseData.body);
      print(data);
      setState(() {
        for(Map i in data){
          listModel.add(ModelUsers.fromJson(i));
        }
        loading = false;
      });
    }
  }
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    getData();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Parsing Data'),
      ),
      body: Container(
        child: loading
        ? Center(
          child: CircularProgressIndicator()
          ,)
           :
        ListView.builder(
          itemCount: listModel.length,
          itemBuilder: (context , i){
            final nDataList = listModel[i];
            return Container(
              height: 150,
              child: InkWell(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context) => DetailPage(nDataList)));
                  },
                child: Card(
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Text(nDataList.name, style: TextStyle(
                          fontWeight: FontWeight.bold, fontSize: 22
                        ),
                      ),
                      Text(nDataList.email),
                      Text(nDataList.phone),
                      Text(nDataList.website),

                      ],
                    ),
                    ),
                
              ),
            );
          },
        ),

      ),
    );
  }
}