CODEWITHSUNDEEP
apigridviewflutter
TheGuy
TheGuy

Reputation: 59

Fetch Images from server into gridview in flutter

I have tried but couldn't get my head around with the docs.

I want to load images from server and load them into a gridview. The server sends 10 images at a time. When the gridview has been scrolled to bottom, it should send request for next 10 items. When the user clicks on a particular photo it would be opened in another widget with extra details. Performance is a major concern.

I am not asking for code. I just want the exact direction. It shall help establish the community for flutter.

Upvotes: 2

Views: 3396

Answers (3)

massive success
massive success

Reputation: 21

[flutter_image_gallery_example][1] [https://github.com/andrea7887/flutter_image_gallery_example/blob/master/lib/main.dart][1]

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: GalleryDemo(),
    );
  }
}

class GalleryDemo extends StatelessWidget {
  GalleryDemo({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Image Gallery Example"),
        ),
        body: Center(
          child: FutureBuilder<List<String>>(
            future: fetchGalleryData(),
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return GridView.builder(
                    itemCount: snapshot.data.length,
                    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                        crossAxisCount: 2),
                    itemBuilder: (context, index) {
                      return Padding(
                          padding: EdgeInsets.all(5),
                          child: Container(
                              decoration: new BoxDecoration(
                                  image: new DecorationImage(
                                      image: new NetworkImage(
                                          snapshot.data[index]),
                                      fit: BoxFit.cover))));
                    });
              }
              return Center(child: CircularProgressIndicator());
            },
          ),
        ));
  }
}

Future<List<String>> fetchGalleryData() async {
  try {
    final response = await http
        .get(
            'https://kaleidosblog.s3-eu-west-1.amazonaws.com/flutter_gallery/data.json')
        .timeout(Duration(seconds: 5));

    if (response.statusCode == 200) {
      return compute(parseGalleryData, response.body);
    } else {
      throw Exception('Failed to load');
    }
  } on SocketException catch (e) {
    throw Exception('Failed to load');
  }
}

List<String> parseGalleryData(String responseBody) {
  final parsed = List<String>.from(json.decode(responseBody));
  return parsed;
}

Upvotes: 0

Mans
Mans

Reputation: 3261

I accomplished this when building an Instagram clone with Flutter. If you are familiar with Instagram, a profile page has a grid of images which are the user's post. You can then click on the image and it will open the image into a 'fullscreen' widget where you have the ability do to other actions (like commenting and liking).

If you are interested in the code, you can check it out here. The function buildUserPosts is where the grid is created.

Upvotes: 4

Thanthu
Thanthu

Reputation: 5078

May be my answer to the question in the below link will help. In your case just change it to GridView instead of ListView.

view

Upvotes: 0

Related Questions