15. Flutter Tutorial for Beginners – Image from URL

0
438

There is many way to show an image from the url. The built in way is Image widget. Here is an example of Image widget which can load an image from url.

Image(
  image: NetworkImage(
    'http://34.71.214.132/wp-content/uploads/2019/06/logo-300x52.png'
  ),
),

Full Example:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: Image(
          image: NetworkImage(
            'http://34.71.214.132/wp-content/uploads/2019/06/logo-300x52.png'
          ),
        ),
      ),
    );
  }

}

There is another way to show image from the url and which is my favorite is called “flutter_advanced_networkimage” package. Because it has also cache, zoom and transition features.

To do that follow the instructions.

Step 1. Go to https://pub.dev/packages/flutter_advanced_networkimage#-installing-tab-

Step 2. Open your flutter project, then open pubspec.yml file

Step 3. Add ‘flutter_advanced_networkimage’  dependencies to your package’s pubspec.yaml file

For example:

dependencies:
  flutter:
    sdk: flutter

  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
  flutter_advanced_networkimage: ^0.7.0

Step 4. Then click “Packages get”

Step 5. Import it into your dart file.

import 'package:flutter_advanced_networkimage/provider.dart';
import 'package:flutter_advanced_networkimage/transition.dart';
import 'package:flutter_advanced_networkimage/zoomable.dart';

Step 6. Use the following code to get the image from the url.

Image(
  image: AdvancedNetworkImage(
    'http://34.71.214.132/wp-content/uploads/2019/06/logo-300x52.png',
    useDiskCache: true,
    cacheRule: CacheRule(maxAge: const Duration(days: 7)),
  ),
  fit: BoxFit.cover,
),

You can use more option like zoom.

ZoomableWidget(
  minScale: 0.3,
  maxScale: 2.0,
  // default factor is 1.0, use 0.0 to disable boundary
  panLimit: 0.8,
  child: Container(
    child: TransitionToImage(
      image: AdvancedNetworkImage('http://34.71.214.132/wp-content/uploads/2019/06/logo-300x52.png', timeoutDuration: Duration(minutes: 1)),
      // This is the default placeholder widget at loading status,
      // you can write your own widget with CustomPainter.
      placeholder: CircularProgressIndicator(),
      // This is default duration
      duration: Duration(milliseconds: 300),
    ),
  ),
)

Full example:

import 'package:flutter/material.dart';
import 'package:flutter_advanced_networkimage/provider.dart';
import 'package:flutter_advanced_networkimage/transition.dart';
import 'package:flutter_advanced_networkimage/zoomable.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: ZoomableWidget(
          minScale: 0.3,
          maxScale: 2.0,
          // default factor is 1.0, use 0.0 to disable boundary
          panLimit: 0.8,
          child: Container(
            child: TransitionToImage(
              image: AdvancedNetworkImage('http://34.71.214.132/wp-content/uploads/2019/06/logo-300x52.png', timeoutDuration: Duration(minutes: 1)),
              // This is the default placeholder widget at loading status,
              // you can write your own widget with CustomPainter.
              placeholder: CircularProgressIndicator(),
              // This is default duration
              duration: Duration(milliseconds: 300),
            ),
          ),
        )
      ),
    );
  }

}

LEAVE A REPLY

Please enter your comment!
Please enter your name here