multi_image 1.0.0 copy "multi_image: ^1.0.0" to clipboard
multi_image: ^1.0.0 copied to clipboard

A Flutter package to display multiple images with gallery support and shimmer loading.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:multi_image/multi_image.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.white,
      ),
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.blue,
          title: const Text('MultiImage Example'),
        ),
        body: Padding(
          padding: const EdgeInsets.symmetric(horizontal: 20),
          child: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  SizedBox(height: 20),
                  Text(
                    'Image 1',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 20),
                  MultiImage(
                    openGalleryBackground: Colors.blueAccent.shade700,
                    imageUrls: [
                      'https://camo.githubusercontent.com/a0668daf0094614bfeda6610c92a80a3e37bf884010a41ec096dfbf88d294618/68747470733a2f2f6d706661686d6f7a736c68616a7479756d6c75672e73757061626173652e636f2f73746f726167652f76312f6f626a6563742f7075626c69632f6769746875622f2f556e7469746c656425323064657369676e2532302833292e706e67'
                    ],
                    context: context,
                  ),
                  SizedBox(height: 20),
                  Text(
                    'Image 2',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 20),
                  MultiImage(
                    imageUrls: [
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                    ],
                    context: context,
                  ),
                  SizedBox(height: 20),
                  Text(
                    'Image 3',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 20),
                  MultiImage(
                    imageUrls: [
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://camo.githubusercontent.com/a0668daf0094614bfeda6610c92a80a3e37bf884010a41ec096dfbf88d294618/68747470733a2f2f6d706661686d6f7a736c68616a7479756d6c75672e73757061626173652e636f2f73746f726167652f76312f6f626a6563742f7075626c69632f6769746875622f2f556e7469746c656425323064657369676e2532302833292e706e67',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                    ],
                    context: context,
                  ),
                  SizedBox(height: 20),
                  Text(
                    'Image 4 or more',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(height: 20),
                  MultiImage(
                    fallbackColor: Colors.blue.shade900,
                    fallbackImage: Icon(
                      Icons.image_not_supported_outlined,
                      color: Colors.blue,
                      size: 48,
                    ),
                    openGalleryBackButtonIcon: Icon(
                      Icons.arrow_back_ios_new_outlined,
                      color: Colors.white,
                    ),
                    imageUrls: [
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      '',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://imgs.search.brave.com/elHgvfkPfbFAJSDQ0Xv83KeTDGuJQw9IPxH8_yrpMGs/rs:fit:860:0:0:0/g:ce/aHR0cHM6Ly93d3cu/bWlxdWlkby5jb20v/d3AtY29udGVudC91/cGxvYWRzLzIwMjUv/MDUvaGVhZGVyLTYt/dG9wLWZsdXR0ZXIt/YWx0ZXJuYXRpdmVz/LWZvci1tb2Rlcm4t/YXBwLWRldmVsb3Bt/ZW50LmpwZw',
                      'https://camo.githubusercontent.com/a0668daf0094614bfeda6610c92a80a3e37bf884010a41ec096dfbf88d294618/68747470733a2f2f6d706661686d6f7a736c68616a7479756d6c75672e73757061626173652e636f2f73746f726167652f76312f6f626a6563742f7075626c69632f6769746875622f2f556e7469746c656425323064657369676e2532302833292e706e67'
                    ],
                    context: context,
                  ),
                  SizedBox(height: 40),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}
2
likes
135
points
134
downloads

Publisher

unverified uploader

Weekly Downloads

A Flutter package to display multiple images with gallery support and shimmer loading.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (license)

Dependencies

flutter, flutter_hooks, shimmer, smooth_page_indicator

More

Packages that depend on multi_image