Flutter Tutorial

How to add image in Flutter from network

Image in flutter

Code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget{
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
     return MaterialApp(
       debugShowCheckedModeBanner: false,
       title: 'Flutter App',
       theme: ThemeData(
           primarySwatch: Colors.green,

       ),
       darkTheme: ThemeData(
           brightness: Brightness.light,
           primarySwatch: Colors.grey
       ),
       color: Colors.amberAccent,
       home: Scaffold(
         appBar: AppBar(
           centerTitle: true,
           backgroundColor: Colors.cyan,
           title: const Text(
               'Flutter Tutorial',
             style: TextStyle(
               color: Colors.white,
               fontWeight: FontWeight.w800,
             ),
           ),

         ),
         body: const MyHome(),
       )
     );
  }
}

class MyHome extends StatelessWidget{
  const MyHome({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            const Padding(padding: EdgeInsets.all(20)),
            Image.network(
              'https://assets-global.website-files.com/5f841209f4e71b2d70034471/60bb4a2e143f632da3e56aea_Flutter%20app%20development%20(2).png',
              height: 150,
              width: 250,
              scale: 2.5,
                opacity: const AlwaysStoppedAnimation<double>(0.5),
            ),
            const SizedBox(height: 20,),
            Image.network(
                'https://upload.wikimedia.org/wikipedia/commons/thumb/4/44/Google-flutter-logo.svg/2560px-Google-flutter-logo.svg.png',
              height: 150,
              width: 200,
              scale: 2.5,
            ),
            const SizedBox(height: 20,),
            FadeInImage.assetNetwork(placeholder: 'assets/anyimage.png', image: 'https://assets-global.website-files.com/5f841209f4e71b2d70034471/60bb4a2e143f632da3e56aea_Flutter%20app%20development%20(2).png',
              height: 150,
              width: 200,
            ),
          ],
        )
      )
    );
  }
}

OutPut

image in flutter
Scroll to Top