Image.network() is used to display image from internet in Flutter. The image widget has its own method .network() which will automatically loads image on calling time if mobile network is present. This function will automatically determines the mobile network and WiFi network and loads the image. So in this tutorial we would learn about Loading Image from HTTP URL in Flutter Android iOS App Example Tutorial. This widget supports all the major parameters like width, height and image fix properties.
Contents in this project Loading Image from HTTP URL in Flutter Android iOS App Example Tutorial:
1. Open your project’s main.dart file in editor & import material.dart package. This package contain all the major widgets in flutter.
|
1 |
import 'package:flutter/material.dart'; |
2. Call the MyApp class which will we create in next step using void main runApp function. This will make sure that on the application start time MyApp class will be executed first.
|
1 |
void main() => runApp(MyApp()); |
3. Create a class named as MyApp extends StatelessWidget.
|
1 2 3 |
class MyApp extends StatelessWidget { } |
4. Create widget build method in your class with Application App title bar.
|
1 2 3 4 5 6 7 8 9 10 11 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Show Image from URL'), ) )); } } |
5. Creating the body in class. Inside the body we would first call the Center widget and then Column widget. In column widget we would define the Image.network() widget with image URL.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Show Image from URL'), ), body: Center( child: Column( children: [ Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain,), ], ), ))); } } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar( title: Text('Show Image from URL'), ), body: Center( child: Column( children: [ Image.network('https://flutter-examples.com/wp-content/uploads/2019/09/blossom.jpg', width: 300, height: 200, fit: BoxFit.contain,), ], ), ))); } } |
Screenshot:
