Flutter Image View Full screen

When your app have a feature to upload image, so you also need to showing images uploaded to user. Here we will learn how to create Image View in Flutter.

Flutter Image View

Image View is a feature to showing images to make it more clear to see the image in the big size or even zoom able. Commonly many apps will have this feature, especially online shop apps, which they have a lot of products and of course showing the image product. In the items product, image will show in small size, but when you click the image, the apps will showing up image in the full screen. So you can see full image of that product.

That’s a function of Image View in apps. Now here we will try to implement Image Viewer in our image to make it more clear to see for user experiences.

Let get started…!!!

This tutorial we use existing project, if you want to follow the project you can check this link.

First, create file ShowImageFullSlider.dart in lib folder, and put this code.

 
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SliderShowFullmages extends StatefulWidget{
  final List listImagesModel;
  final int current;
  const SliderShowFullmages({ Key key, this.listImagesModel, this.current }) : super(key: key);
  @override
   _SliderShowFullmagesState createState() =>  _SliderShowFullmagesState();
}

class _SliderShowFullmagesState extends State<SliderShowFullmages>  {
  int _current = 0;
  bool _stateChange = false; 
  @override
  void initState() {
    super.initState();
  }

  List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }
    return result;
  }


  @override
  Widget build(BuildContext context) {
    _current = (_stateChange == false) ? widget.current : _current;
    return new Container(
      color: Colors.transparent,
      child: new Scaffold(
        backgroundColor: Colors.transparent,
        appBar: AppBar(
          backgroundColor: Colors.transparent,
          //title: const Text('Transaction Detail'),
        ),
        body: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              CarouselSlider(
                options: CarouselOptions(
                  autoPlay: false,
                  height: MediaQuery.of(context).size.height/1.3,
                  viewportFraction: 1.0,
                  onPageChanged: (index, data) {
                    setState(() {
                      _stateChange = true;
                      _current = index;
                    });
                  },
                  initialPage: widget.current
                ),
                items:  map<Widget>(widget.listImagesModel, (index, url) {
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        child: ClipRRect(
                          borderRadius: BorderRadius.all(Radius.circular(0.0)),
                          child: Image.asset(
                            url,
                            fit: BoxFit.fill,
                            height: 400.0,
                          ),
                        ),
                      )
                    ]
                  );
                }),
                
              ),
              
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: map<Widget>(widget.listImagesModel, (index, url) {
                  return Container(
                    width: 10.0,
                    height: 9.0,
                    margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
                    decoration: BoxDecoration(
                      shape: BoxShape.circle,
                      color: (_current == index) ? Colors.redAccent : Colors.grey,
                    ),
                  );
                }),
              ),
            ],
          ),
        )
      )
    );
  }
          
}

If you notice in code above, in the first code class we declare listImageModel to put all image into the list and variable current to get state image from previous layout. There also have method map, that method to mapping image that we have in listImageModel, we will use map method to generate image and image indicator.

   List<T> map<T>(List list, Function handler) {
    List<T> result = [];
    for (var i = 0; i < list.length; i++) {
      result.add(handler(i, list[i]));
    }
    return result;
  }

We also define a logic to check state image index weather the state is change or not.

 _current = (_stateChange == false) ? widget.current : _current;

We have done with ShowImageFullSlider, and the second thing we need to do is modify main.dart, go to method listImage,

//fungsi untuk return image list carousel
  List<Widget> listImage(List list){
    var obj = list.map((url){
      return Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              child: Image.asset(url, fit: BoxFit.fill, height: 255,),
            )
          ],
        ),
      );
    }).toList();
    return obj;
  }

Add InkWell to detect event Tap inside image.

//fungsi untuk return image list carousel
  List<Widget> listImage(List list){
    var obj = list.map((url){
      return Container(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            ClipRRect(
              child: InkWell(
                onTap: (){
                  Navigator.of(context).push(MaterialPageRoute(builder: (context) => SliderShowFullmages(listImagesModel: list, current: _current)));
                },
                child: Image.asset(url, fit: BoxFit.fill, height: 255,),
              ) 
            )
          ],
        ),
      );
    }).toList();
    return obj;
  }

Finally, everything is done, so let’s running the project now, you will see the result will be coming like this.

Flutter image view

Congratulation, that’s how to create image view in full screen mode. Hope this article helpful. If you want to get more article about flutter you can visit this link.

Advertisements
Share: