View video tutorial
FLUTTER Image widget
FLUTTER
This tutorial will show how to use Image widget in Flutter.
Example
Flutter Image widget
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.green, scaffoldBackgroundColor: Colors.white),
//theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.grey),
debugShowCheckedModeBanner: false,
home: MyWidget(),
);
}
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
final ButtonStyle style = ElevatedButton.styleFrom(
backgroundColor: Colors.green.shade800,
foregroundColor: Colors.white70,
minimumSize: Size(120, 66),
padding: EdgeInsets.symmetric(horizontal: 16),
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(5)),
),
);
return Scaffold(
appBar: AppBar(
title: Text("Appbar Title here"),
),
body: Center(
child: Column(
children: <Widget>[
Image(
image: NetworkImage(
"https://images.unsplash.com/photo-1496715976403-7e36dc43f17b?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=870&q=80"),
width: 100,
height: 80,
),
Image.network(
"https://images.unsplash.com/photo-1484589065579-248aad0d8b13?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=459&q=80",
height: 100,
width: 80),
Image(
image: AssetImage("assets/a.jpeg"),
width: 100,
height: 80,
),
Image.asset(
"assets/a.png",
width: 100,
height: 80,
),
Divider(),
Image.asset(
"assets/a.jpg",
width: 100,
height: 80,
),
],
),
),
);
}
}
assets configuration in pubspec.yaml file.
Output should look like this.
Note: For all material widgets visit Flutter Material Widgets. For all widgets classes visit Flutter Widgets Classes.
For documentation: visit dart documentation. visit flutter documentation.
Try Dart and Flutter Here or Here