import 'package:flutter/material.dart';
import 'src/app.dart';
    void main(){
      runApp(App());
    }


    class ImageModel {

      int id;
      String name;
      String url;


      ImageModel.fromJson(parsedJson){
        id = parsedJson['id'];
        name = parsedJson['name'];
        url = parsedJson['url'];

      }


    }



    //import
    import 'package:flutter/material.dart';
    import 'package:http/http.dart' show get; //import for making http requests
    import 'models/image_model.dart'; //import model
    import 'dart:convert'; //convert json
    import 'widgets/image_list.dart'; //import image widget



    class App extends StatefulWidget{

      createState() {
        return AppState();
      }

    }


    // create class
    class AppState extends State<App> {

      int counter = 0;
      List<ImageModel> images = [];


      void fetchImage() async{

        counter++;
       var response = await get('http://192.168.1.66:3000/api/images/$counter');
       var imageModel = ImageModel.fromJson(json.decode(response.body));

       setState(() {
         images.add(imageModel);
       });


      }


      Widget build(context) {
        return MaterialApp(
          home: Scaffold(
            body: ImageList(images),
            floatingActionButton: FloatingActionButton(
              onPressed: fetchImage,


              child: Icon(Icons.add),

            ),
            appBar: AppBar(
              title: Text('Title'),

            ),

          ),
        );
      }


    }

    import 'package:flutter/material.dart';
    import '../models/image_model.dart';


    class ImageList extends StatelessWidget {

      final List<ImageModel> images;

      ImageList(this.images);


      Widget build(context) {
        return ListView.builder(
          itemCount: images.length,
          itemBuilder: (context,int index){

            return Container(
              margin: EdgeInsets.all(20.0),
              child: Image.network(images[index].url),

            );

          },
        );
      }

    }