How to make Image Exhibition App in Flutter || Image Slider in Flutter || How to use Multiple images in flutter app

 

How to make Image Exhibition App In Flutter (Hybrid App) (IOS) || Make a Image Slider App || Horizontal Images in Flutter || How to use Multiple images in flutter app

Firstly Install the Flutter Setup and start new project .

Right Click on Lib folder and make new Dart File .

Use Widget to start .

Paste the following code:

//Library
import 'package:flutter/material.dart';
//using Stateless Widget
class ImageScroll extends StatelessWidget {
  const ImageScroll({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    //using Scaffold widget
    return Scaffold(
      //apply Background to app
      backgroundColor: Colors.blueAccent,
      //make appbar
      appBar: AppBar(
        // backgroundColor: Colors.black12,
        //give title to App bar
        title: const Text('Image Exhibition'),
        //Centralize the AppBar Text
        centerTitle: true,
      ),
      //Using SingleChildScrollView to Scroll images
      body: SingleChildScrollView(
        //give direction to SingleChildScrollView
        scrollDirection: Axis.horizontal,
        //Centralize the images
        child: Center(
          //u can place images either in row or column
          child: Row(
            children: [
              //give padding to images
              Padding(
                padding: const EdgeInsets.all(8.0),

                // Image.network(src)
                //apply network images
                child: Image.network(
                    "https://www.pakistantravelblog.com/wp-content/uploads/2020/06/8-marala-village-1-768x460.jpg",height: 250),
              ),
              //use mulitiple images in app
              Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Image.network(
                      "https://www.pakistantravelblog.com/wp-content/uploads/2020/06/6-ghizer-village-1024x576.jpg",height: 250)),
              Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Image.network(
                      "https://www.pakistantravelblog.com/wp-content/uploads/2020/06/5-passu-village-1024x684.jpg",height: 250)),
              Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Image.network(
                      "https://www.pakistantravelblog.com/wp-content/uploads/2020/06/4-ganish_hunza_gilgit_baltistan-1-1024x603.jpg",height: 250)),
              Padding(
                  padding: const EdgeInsets.all(15.0),
                  child: Image.network(
                      "https://www.pakistantravelblog.com/wp-content/uploads/2020/06/3-brumbret-village-1024x618.jpg",height: 250)),
              Padding(
                  padding: const EdgeInsets.all(15.0),

                  child: Image.network(

                      "https://www.pakistantravelblog.com/wp-content/uploads/2020/06/1-arang_khel_ajk_pakistan-1024x681.jpg",height: 250,)),
            ],
          ),
        ),
      ),
    );
  }
}