Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.2k views
in Technique[技术] by (71.8m points)

dart - how to display images and text on it in listview flutter?

i want to display a images and text in listview. Data is parsed and set it in model class. can you please help me out. Below is my class.

import 'dart:async';
import 'dart:convert';
import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:http/http.dart' as http;

Future<List<Photo>> fetchPhotos(http.Client client) async {
  final response = await client.get('url here');

  return compute(parsePhotos, response.body);
}

// A function that will convert a response body into a List<Photo>
List<Photo> parsePhotos(String responseBody) {
  final parsed = json.decode(responseBody);
  return (parsed["data"]["categoryList"] as List)
      .map<Photo>((json) => new Photo.fromJson(json))
      .toList();
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // SystemChrome.setEnabledSystemUIOverlays([]);
    return new MyHomePage();
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new FutureBuilder<List<Photo>>(
      future: fetchPhotos(new http.Client()),
      builder: (context, snapshot) {
        if (snapshot.hasError) print(snapshot.error);
        return snapshot.hasData
            ? new PhotosList(photos: snapshot.data)
            : new Center(child: new CircularProgressIndicator());
      },
    );
  }
}

class PhotosList extends StatelessWidget {
  final List<Photo> photos;

  PhotosList({Key key, this.photos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return new Column(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      children: <Widget>[
        new Expanded(child: _buildList(context)
        ),
    **//Able to display images but want to show text from list on images.**
        new Padding(
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 8.0),
          child: new Text('DAILY WALLPAPER',
              style: new TextStyle(
                  fontSize: 30.0,
                  color: Colors.black,
                  fontWeight: FontWeight.bold)),
        ),
      ],
    );
  }

  //Showing the images in listview
  ListView _buildList(context) {
    return new ListView.builder(
        itemCount: photos.length,
        itemBuilder: (context, int) {
          return new CachedNetworkImage(imageUrl: photos[int].url);
        });
  }
}

class Photo {
  final int catID;
  final String title;
  final String url;
  final String thumbnailUrl;
  final String description;
  final String webstiteURL;

  Photo(
      {this.catID,
      this.title,
      this.url,
      this.thumbnailUrl,
      this.description,
      this.webstiteURL});

  factory Photo.fromJson(Map<String, dynamic> json) {
    return new Photo(
      catID: json['category_id'] as int,
      title: json['category_name'] as String,
      url: json['category_img'] as String,
      thumbnailUrl: json['thumb_img'] as String,
      description: json['description'] as String,
      webstiteURL: json['website_url'] as String,
    );
  }
}
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You need to build your layout in itemBuilder property of ListView. If you want to place the text on the image the best layout widget is Stack.

See the following in order to get the layout system of flutter: https://flutter.io/tutorials/layout/

and for all the available layout widgets see: https://flutter.io/widgets/layout/

and Stack: https://docs.flutter.io/flutter/widgets/Stack-class.html

Something like this:

new Stack(
  children: <Widget>[
    new Positioned.fill(
      child: new FadeInImage(
        placeholder: new AssetImage('placeholder.png'),
        image: new CachedNetworkImageProvider(photos[int].url),
        fit: BoxFit.contain,
        alignment: Alignment.center,
        fadeInDuration: new Duration(milliseconds: 200),
        fadeInCurve: Curves.linear,
      ),
    ),
    new Positioned(
      top: 10.0,
      left: 10.0,
      child: new Container(
        child: new Text(photos[int].title)
      ),
    ),
  ],
)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...