在颤动中从服务器获取图像到gridview

Posted

技术标签:

【中文标题】在颤动中从服务器获取图像到gridview【英文标题】:Fetch Images from server into gridview in flutter 【发布时间】:2019-01-13 17:15:13 【问题描述】:

我已经尝试过,但无法理解文档。

我想从服务器加载图像并将它们加载到网格视图中。服务器一次发送 10 张图像。当 gridview 滚动到底部时,它应该发送下一个 10 项的请求。当用户单击特定照片时,它将在另一个带有额外详细信息的小部件中打开。性能是一个主要问题。

我不是要代码。我只想要确切的方向。它将有助于建立 Flutter 社区。

【问题讨论】:

【参考方案1】:

我在使用 Flutter 构建 Instagram clone 时实现了这一点。如果您熟悉 Instagram,个人资料页面有一个图像网格,这些图像是用户的帖子。然后,您可以单击图像,它会将图像打开到“全屏”小部件中,您可以在其中执行其他操作(如评论和喜欢)。

如果您对代码感兴趣,可以查看here。函数buildUserPosts 是创建网格的地方。

【讨论】:

非常感谢您的辛勤工作...作为建议,您应该制作一个 youtube 系列。这对社区来说将是一个很好的教训 很高兴我能帮上忙。已经请求了几次 youtube 系列,但我手上的时间已经不多了。当我释放它时,它就在我的待办事项列表中。【参考方案2】:

我对以下链接中问题的回答可能会有所帮助。在您的情况下,只需将其更改为 GridView 而不是 ListView

view

【讨论】:

【参考方案3】:

[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;

【讨论】:

以上是关于在颤动中从服务器获取图像到gridview的主要内容,如果未能解决你的问题,请参考以下文章

如何在颤动中从 api url 加载图像?

如何在颤动中计算 GridView.builder 的 childAspectRatio

如何在颤动中从其他页面的块流中获取数据

如何在图像按钮单击时从Gridview获取ID。

在颤动中从实时数据库中获取空值

如何在颤动中从实时数据库中获取特定数据?