CODEWITHSUNDEEP
httpflutterdart
David Csida
David Csida

Reputation: 23

How can I update a Network Image in Flutter

I'm currently learning Flutter and I wanted to try out Network Requests and working with Futures.

I want to show a random image from unsplash.com using their API and I want to change the image every time I press a certain button.

I tried implementing a function to change the image, but it doesn't work.

My code looks like this:

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:async';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: RandomImage(),
    );
  }
}

class RandomImage extends StatefulWidget {
  @override
  _RandomImageState createState() => _RandomImageState();
}

class _RandomImageState extends State<RandomImage> {

  static String imageUrl = 'https://source.unsplash.com/random/300x200';
  Future _imgFuture = http.get(imageUrl);

  void _changeImage() async {
    _imgFuture = http.put(imageUrl);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: (Text('Hello')),
      ),
      body: Center(
        child: Column(
          children: [

            Spacer(),

            FutureBuilder(
              future: _imgFuture,
              builder: (context, snapshot) {
                if (snapshot.hasError) {
                  return Text('Oops, there was an error');
                } else if (snapshot.hasData) {
                  return Image.network(imageUrl);
                } else {
                  return Text('No value yet');
                }
              },
            ),

            RaisedButton(
              child: Text('Change Image!'),
              onPressed: () => setState(() {
                _changeImage();
              }),
            ),

            Spacer(),

          ],
        ),
      ),
    );
  }
}

Upvotes: 2

Views: 4104

Answers (2)

Tokenyet
Tokenyet

Reputation: 4291

Actually, Image.network is keeping your image, for more detail to see It here. The solution for this issue is make a simple useless query to api, so the image will be identical differently in flutter.


            RaisedButton(
              child: Text('Change Image!'),
              onPressed: () => setState(() {
                // _changeImage();
                imageUrl="https://source.unsplash.com/random/300x200?v=${DateTime.now().millisecondsSinceEpoch}";
              }),
            ),

The image won't change If you call the api too frequently, you might want to add a timer to prevent user from clicking too often.

Upvotes: 3

Crizant
Crizant

Reputation: 1661

I think the problem is in the _changeImage() method, try replace http.put with http.get.

Upvotes: 0

Related Questions