How To Make Thumbnail Tap Image Using Flutter Android App

admin_img Posted By Bajarangi soft , Posted On 30-10-2020

Regardless of the decisions we make regarding OOM handling for images, it would be nice if the image_picker could also generate much smaller thumbnails to make it easy to avoid loading the full size images.

How To Make Thumbnail Tap Image Using Flutter Android App

Thumbnail Tap Image
Complete Code For Thumbnail Tap Image In Flutter
main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  bool _isImageShown = false;
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        backgroundColor: Colors.blue[700],
        title: Text('Thumbnail Tap Image'),
      ),
      body: Stack(
        children: <Widget>[
          !_isImageShown
              ? Center(
            child: GestureDetector(
              onTap: () => setState(() => _isImageShown = !_isImageShown),
              child: new Image.network(
                'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ0JhaimSD1ayvA9vffVRcueFMd8MqD5cJH9A&usqp=CAU',
                width: 90,
                height: 150,
                fit: BoxFit.cover,
              ),
            ),
          )
              : SizedBox(),
          _isImageShown
              ? Center(
            child: new Image.network(
              'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQ0JhaimSD1ayvA9vffVRcueFMd8MqD5cJH9A&usqp=CAU',
              width: size.width,
              height: size.height,
              fit: BoxFit.fill,
            ),
          )
              : SizedBox(),
        ],
      ),
    );
  }
}

Related Post