custom_gallery_display 0.2.3 copy "custom_gallery_display: ^0.2.3" to clipboard
custom_gallery_display: ^0.2.3 copied to clipboard

outdated

It is like instagram gallery display and custom of camera and video

example/lib/main.dart

import 'dart:io';
import 'package:custom_gallery_display/custom_gallery_display.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Custom gallery display',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              instagramButton1(context),
              instagramButton2(context),
              instagramButton3(context),
              normalButton1(context),
              normalButton2(context),
              normalButton3(context),
            ]),
      ),
    );
  }

  ElevatedButton normalButton1(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Navigator.of(context).push(
          CupertinoPageRoute(
            builder: (context) => CustomGallery.normalDisplay(
              enableCamera: false, // It's false by default
              enableVideo: false, // It's false by default
              moveToPage: (SelectedImageDetails details) async {
                // You can take this variables and push to another page
                bool multiSelectionMode = details.multiSelectionMode;
                bool isThatImage = details.isThatImage;
                List<File>? selectedFiles = details
                    .selectedFiles; // If there one image selected it will be null
                File selectedFile = details.selectedFile;
                double aspectRatio = details.aspectRatio;
              },
            ),
          ),
        );
      },
      child: const Text("Normal display"),
    );
  }

  ElevatedButton normalButton2(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Navigator.of(context).push(
          CupertinoPageRoute(
            builder: (context) => CustomGallery.normalDisplay(
              enableVideo: true,
              appTheme: AppTheme(
                  focusColor: Colors.white, primaryColor: Colors.black),
              tabsNames: TabsNames(
                videoName: "فيديو",
                galleryName: "المعرض",
                deletingName: "حذف",
                clearImagesName: "الغاء الصور المحدده",
                limitingName: "اقصي حد للصور هو 10",
              ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 1.7,
                mainAxisSpacing: 1.5,
              ),
              moveToPage: (_) async {},
            ),
          ),
        );
      },
      child: const Text("Normal 2 display"),
    );
  }

  ElevatedButton normalButton3(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Navigator.of(context).push(
          CupertinoPageRoute(
            builder: (context) => CustomGallery.normalDisplay(
              enableVideo: true,
              enableCamera: true,
              appTheme: AppTheme(
                  focusColor: Colors.white, primaryColor: Colors.black),
              tabsNames: TabsNames(
                videoName: "視頻",
                photoName: "照片",
                galleryName: "畫廊",
                deletingName: "刪除",
                clearImagesName: "清除所選圖像",
                limitingName: "限制為 10 張照片或視頻",
              ),
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 1.7,
                mainAxisSpacing: 1.5,
                childAspectRatio: .5,
              ),
              moveToPage: (_) async {},
            ),
          ),
        );
      },
      child: const Text("Normal 3 display"),
    );
  }

  ElevatedButton instagramButton1(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Navigator.of(context).push(
          CupertinoPageRoute(
            builder: (context) => CustomGallery.instagramDisplay(
              cropImage: true, // It's true by default
              enableCamera: true, // It's true by default
              enableVideo: true, // It's true by default
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 4,
                crossAxisSpacing: 1.7,
                mainAxisSpacing: 1.5,
              ), // It's by default
              moveToPage: (SelectedImageDetails details) async {
                // You can take this variables and push to another page
                bool multiSelectionMode = details.multiSelectionMode;
                bool isThatImage = details.isThatImage;
                List<File>? selectedFiles = details
                    .selectedFiles; // If there one image selected it will be null
                File selectedFile = details.selectedFile;
                double aspectRatio = details.aspectRatio;
              },
            ),
          ),
        );
      },
      child: const Text("Instagram display"),
    );
  }

  ElevatedButton instagramButton2(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Navigator.of(context).push(
          CupertinoPageRoute(
            builder: (context) => CustomGallery.instagramDisplay(
              enableCamera: false,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 3,
                mainAxisSpacing: 2,
              ),
              appTheme: AppTheme(
                  focusColor: Colors.white, primaryColor: Colors.black),
              moveToPage: (SelectedImageDetails details) async {
                // You can take this variables and push to another page
                bool multiSelectionMode = details.multiSelectionMode;
                bool isThatImage = details.isThatImage;
                List<File>? selectedFiles = details
                    .selectedFiles; // If there one image selected it will be null
                File selectedFile = details.selectedFile;
                double aspectRatio = details.aspectRatio;
              },
            ),
          ),
        );
      },
      child: const Text("Instagram 2 display"),
    );
  }

  ElevatedButton instagramButton3(BuildContext context) {
    return ElevatedButton(
      onPressed: () async {
        await Navigator.of(context).push(
          CupertinoPageRoute(
            builder: (context) => CustomGallery.instagramDisplay(
              enableVideo: false,
              enableCamera: false,
              cropImage: false,
              gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 3,
                crossAxisSpacing: 1.7,
                mainAxisSpacing: 1.5,
                childAspectRatio: .5,
              ),
              moveToPage: (SelectedImageDetails details) async {
                // You can take this variables and push to another page
                bool multiSelectionMode = details.multiSelectionMode;
                bool isThatImage = details.isThatImage;
                List<File>? selectedFiles = details
                    .selectedFiles; // If there one image selected it will be null
                File selectedFile = details.selectedFile;
                double aspectRatio = details.aspectRatio;
              },
            ),
          ),
        );
      },
      child: const Text("Instagram 3 display"),
    );
  }

  Future<void> moveToPage(SelectedImageDetails details) async {
    await Navigator.of(context).push(CupertinoPageRoute(
        builder: (context) => SelectedImage(
            selectedFiles: details.selectedFiles != null
                ? details.selectedFiles!
                : [details.selectedFile],
            aspectRatio: details.aspectRatio)));
  }
}

class SelectedImage extends StatelessWidget {
  final List<File> selectedFiles;
  final double aspectRatio;
  const SelectedImage(
      {Key? key, required this.selectedFiles, required this.aspectRatio})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(elevation: 0),
      body: ListView.builder(
        itemBuilder: (context, index) {
          File image = selectedFiles[index];
          return SizedBox(width: double.infinity, child: Image.file(image));
        },
        itemCount: selectedFiles.length,
      ),
    );
  }
}

// class MyApp extends StatelessWidget {
//   const MyApp({Key? key}) : super(key: key);
//   @override
//   Widget build(BuildContext context) {
//     return MaterialApp(
//       title: 'Custom gallery display',
//       debugShowCheckedModeBanner: false,
//       theme: ThemeData(
//         primarySwatch: Colors.blue,
//       ),
//       home: const MyHomePage(),
//     );
//   }
// }
//
// class MyHomePage extends StatefulWidget {
//   const MyHomePage({Key? key}) : super(key: key);
//   @override
//   State<MyHomePage> createState() => _MyHomePageState();
// }
//
// class _MyHomePageState extends State<MyHomePage> {
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(elevation: 0),
//       body: SingleChildScrollView(
//         child: Column(
//             crossAxisAlignment: CrossAxisAlignment.center,
//             mainAxisAlignment: MainAxisAlignment.center,
//             children: [
//               instagramButton1(context),
//               instagramButton2(context),
//               instagramButton3(context),
//               normalButton1(context),
//               normalButton2(context),
//               normalButton3(context),
//             ]),
//       ),
//     );
//   }
//
//   ElevatedButton normalButton3(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () async {
//         await Navigator.of(context).push(
//           CupertinoPageRoute(
//             builder: (context) => CustomGallery.normalDisplay(
//               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//                 crossAxisCount: 3,
//                 crossAxisSpacing: 1.7,
//                 mainAxisSpacing: 1.5,
//                 childAspectRatio: .5,
//               ),
//               moveToPage: moveToPage,
//             ),
//           ),
//         );
//       },
//       child: const Text("Normal 3 display"),
//     );
//   }
//
//   ElevatedButton normalButton2(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () async {
//         await Navigator.of(context).push(
//           CupertinoPageRoute(
//             builder: (context) => CustomGallery.normalDisplay(
//               enableVideo: true,
//               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//                 crossAxisCount: 4,
//                 crossAxisSpacing: 1.7,
//                 mainAxisSpacing: 1.5,
//               ),
//               moveToPage: moveToPage,
//             ),
//           ),
//         );
//       },
//       child: const Text("Normal 2 display"),
//     );
//   }
//
//   ElevatedButton normalButton1(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () async {
//         await Navigator.of(context).push(
//           CupertinoPageRoute(
//             builder: (context) => CustomGallery.normalDisplay(
//               enableCamera: true,
//               enableVideo: true,
//               moveToPage: moveToPage,
//             ),
//           ),
//         );
//       },
//       child: const Text("Normal display"),
//     );
//   }
//
//   ElevatedButton instagramButton3(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () async {
//         await Navigator.of(context).push(
//           CupertinoPageRoute(
//             builder: (context) => CustomGallery.instagramDisplay(
//               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//                 crossAxisCount: 3,
//                 crossAxisSpacing: 1.7,
//                 mainAxisSpacing: 1.5,
//                 childAspectRatio: .5,
//               ),
//               moveToPage: moveToPage,
//             ),
//           ),
//         );
//       },
//       child: const Text("Instagram 3 display"),
//     );
//   }
//
//   ElevatedButton instagramButton2(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () async {
//         await Navigator.of(context).push(
//           CupertinoPageRoute(
//             builder: (context) => CustomGallery.instagramDisplay(
//               enableVideo: true,
//               enableCamera: false,
//               gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
//                 crossAxisCount: 4,
//                 crossAxisSpacing: 1.7,
//                 mainAxisSpacing: 1.5,
//               ),
//               moveToPage: moveToPage,
//             ),
//           ),
//         );
//       },
//       child: const Text("Instagram 2 display"),
//     );
//   }
//
//   ElevatedButton instagramButton1(BuildContext context) {
//     return ElevatedButton(
//       onPressed: () async {
//         await Navigator.of(context).push(
//           CupertinoPageRoute(
//             builder: (context) =>
//                 CustomGallery.instagramDisplay(moveToPage: moveToPage),
//           ),
//         );
//       },
//       child: const Text("Instagram display"),
//     );
//   }
//
//   Future<void> moveToPage(SelectedImageDetails details) async {
//     await Navigator.of(context).push(CupertinoPageRoute(
//         builder: (context) => SelectedImage(
//             selectedFiles: details.selectedFiles != null
//                 ? details.selectedFiles!
//                 : [details.selectedFile],
//             aspectRatio: details.aspectRatio)));
//   }
// }
//
// class SelectedImage extends StatelessWidget {
//   final List<File> selectedFiles;
//   final double aspectRatio;
//   const SelectedImage(
//       {Key? key, required this.selectedFiles, required this.aspectRatio})
//       : super(key: key);
//
//   @override
//   Widget build(BuildContext context) {
//     return Scaffold(
//       appBar: AppBar(elevation: 0),
//       body: ListView.builder(
//         itemBuilder: (context, index) {
//           File image = selectedFiles[index];
//           return SizedBox(width: double.infinity, child: Image.file(image));
//         },
//         itemCount: selectedFiles.length,
//       ),
//     );
//   }
// }