multi_image_layout 0.1.1 copy "multi_image_layout: ^0.1.1" to clipboard
multi_image_layout: ^0.1.1 copied to clipboard

Flexible gallery package for displaying multiple network and asset images in adaptive layouts.

example/lib/main.dart

import 'package:multi_image_layout/multi_image_layout.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Multi Image Layout Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Text("Single(1) Image"),
              const SizedBox(height: 10),
              MultiImageViewer(images: [
                ImageModel(
                  imageUrl:
                      "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/4086993630.jpg",
                  caption:
                      "Ut eu pariatur sit cupidatat ut sit enim do enim eiusmod officia enim consequat fugiat. Est amet tempor duis tempor sunt reprehenderit officia ut est cillum tempor. Cupidatat sunt nostrud laboris exercitation. Officia do eu consectetur officia velit in nulla ullamco qui elit laborum anim. Do dolore magna id adipisicing excepteur in qui. Irure quis pariatur amet in.",
                )
              ]),
              const SizedBox(height: 30),
              const Text("Two(2) Images"),
              const SizedBox(height: 10),
              MultiImageViewer(
                images: [
                  ImageModel(
                    imageUrl:
                        "https://4.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/4684313123.jpg",
                    caption: "Caption 1",
                  ),
                  ImageModel(
                    imageUrl:
                        "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/8719688791.jpg",
                    caption: "Caption 2",
                  ),
                ],
              ),
              const SizedBox(height: 30),
              const Text("Three(3) Images"),
              const SizedBox(height: 10),
              MultiImageViewer(
                images: [
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/8719688791.jpg",
                      caption: "A caption here"),
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/4086993630.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://2.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/5713335642.jpg",
                      caption: "Another caption here"),
                ],
              ),
              const SizedBox(height: 30),
              const Text("Four(4) Images"),
              const SizedBox(height: 10),
              MultiImageViewer(
                images: [
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/8719688791.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/4086993630.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://2.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/5713335642.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://1.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/6294874831.jpg"),
                ],
              ),
              const SizedBox(height: 30),
              const Text("More than Four(4+) Images"),
              const SizedBox(height: 10),
              MultiImageViewer(
                images: [
                  ImageModel(
                    imageUrl:
                        "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/8719688791.jpg",
                    caption: "A caption here",
                  ),
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/4086993630.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://2.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/5713335642.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://1.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/6294874831.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/8719688791.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://3.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/4086993630.jpg"),
                  ImageModel(
                      imageUrl:
                          "https://2.img-dpreview.com/files/p/TS250x250~sample_galleries/3800753625/5713335642.jpg"),
                ],
                textStyle: const TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 23,
                  color: Colors.white,
                ),
              ),
              const SizedBox(height: 30),
            ],
          ),
        ),
      ),
    );
  }
}
45
likes
120
pub points
80%
popularity

Publisher

unverified uploader

Flexible gallery package for displaying multiple network and asset images in adaptive layouts.

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

cached_network_image, dio, flutter, image_gallery_saver, photo_view, readmore

More

Packages that depend on multi_image_layout