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,
            ),
          ],
        ),
      ),
    );
  }
}

flutter scaffold

assets configuration in pubspec.yaml file.

flutter scaffold

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