Media Upload Example

media_example.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(
      title: 'Flutter Demo',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: Content(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: LayoutBuilder(
        builder: (context, constraints) {
          var maxWidth = constraints.maxWidth;
          var width = maxWidth * 0.22;
          return Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
            const Text(
              "Timeline",
              textAlign: TextAlign.center,
            ),
            Expanded(
                child: Container(
                  color: Colors.black45,
                  child: Row(
                    children: [
                      LargeOption(
                        icon: Icons.add_photo_alternate_outlined,
                        text: "Add Photos",
                      ),
                      LargeOption(
                        icon: Icons.video_library,
                        text: "Add Video",
                      ),
                    ],
                  ),
                ),
                flex: 6),
            Expanded(
                child: Container(
              child: ListView(
                itemExtent: width,
                scrollDirection: Axis.horizontal,
                children: [
                  Option(
                    icon: Icons.mic,
                    text: "Record",
                  ),
                  Option(
                    icon: Icons.photo_camera,
                    text: "Film",
                  ),
                  Option(
                    icon: Icons.content_cut,
                    text: "Trim",
                  ),
                  Option(
                    icon: Icons.crop,
                    text: "Crop",
                  ),
                  Option(
                    icon: Icons.upload_outlined,
                    text: "Upload",
                  ),
                  Option(
                    icon: Icons.file_download,
                    text: "Download",
                  )
                ],
              ),
              color: Colors.black87,
            ))
          ]);
        },
      ),
    );
  }
}

class LargeOption extends StatelessWidget {
  final String text;
  final IconData icon;
  final VoidCallback? onTap;

  const LargeOption({Key? key, required this.text, required this.icon, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: InkWell(
        child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [
          Icon(
            icon,
            size: 108,
            color: Colors.white,
          ),
          SizedBox(
            height: 8,
          ),
          Text(
            text,
            style: TextStyle(color: Colors.white, fontSize: 22),
          )
        ]),
        onTap: () => onTap?.call(),
      ),
    );
  }
}

class Option extends StatelessWidget {
  final String text;
  final IconData icon;
  final VoidCallback? onTap;

  const Option({Key? key, required this.text, required this.icon, this.onTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: InkWell(
        child: Column(crossAxisAlignment: CrossAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center, children: [
          Icon(
            icon,
            color: Colors.white,
          ),
          Text(
            text,
            style: TextStyle(color: Colors.white),
          )
        ]),
        onTap: () => onTap?.call(),
      ),
    );
  }
}