Camera Preview and Multipart Image Upload In Flutter

Camera Preview and Multipart Image Upload In Flutter :

This flutter tutorial camera preview and multipart image upload to server in flutter.

dependencies

camera:
path_provider:
http:

Camera Preview Image

AspectRatio(child: CameraPreview(controller), aspectRatio: controller.value.aspectRatio)

main.dart

import 'dart:async';
import 'dart:io';
import 'package:async/async.dart';
import 'package:flutter/material.dart';
import 'package:camera/camera.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

List<CameraDescription> cameras;

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  cameras = await availableCameras();
  runApp(MaterialApp(home: CameraApp()));
}

class CameraApp extends StatefulWidget {
  @override
  _CameraAppState createState() => _CameraAppState();
}

class _CameraAppState extends State<CameraApp>
    with SingleTickerProviderStateMixin {
  CameraController controller;
  int currentCamera = 0;
  bool isOffStaged = true;
  bool showpic = true;
  double _bottomPosition = 0;
  List<Widget> texts = List<Widget>();
  File _file;

  static final Animatable<Offset> _drawerDetailsTween = Tween<Offset>(
    begin: const Offset(0.0, 1.0),
    end: Offset.zero,
  ).chain(CurveTween(
    curve: Curves.fastOutSlowIn,
  ));
  Animation<Offset> _drawerDetailsPosition;
  AnimationController _controller;
  @override
  void initState() {
    super.initState();
    _file = null;
    controller = CameraController(cameras[currentCamera], ResolutionPreset.high);
    controller.initialize().then((_) {
      if (!mounted) {
        return;
      }
      setState(() {});
    });
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(milliseconds: 300),
    );
    _drawerDetailsPosition = _controller.drive(_drawerDetailsTween);
  }

  @override
  void dispose() {
    controller?.dispose();
    _controller.dispose();
    super.dispose();
  }

  Future<File> _takePicture() async {
    if (!controller.value.isInitialized) {
      // TODO: show snackbar
      print("no camera selected! show snackbar");
      return null;
    }
    final Directory extDir = await getApplicationDocumentsDirectory();
    final String dirPath = "${extDir.path}/pictures/fluttertutorial";
    await Directory(dirPath).create(recursive: true);
    final String filePath = "$dirPath/${timestamp()}.jpg";

    if (controller.value.isTakingPicture) {
      return null;
    }

    try {
      await controller.takePicture(filePath);
    } on CameraException catch (e) {
      // TODO: show snackbar
      print("show snackbar here");
      return null;
    }
    setState(() {
      _file = File(filePath);
    });

    return File(filePath);
  }

  String timestamp() => DateTime.now().millisecondsSinceEpoch.toString();

  upload(File imageFile) async {
    print('Tag' + imageFile.path.toString());
    var stream =
    new http.ByteStream(DelegatingStream.typed(imageFile.openRead()));
    // get file length
    var length = await imageFile.length();

    // string to uri
    //var uri = Uri.parse("url");
    var uri = Uri.parse("url");

    // create multipart request
    var request = new http.MultipartRequest("POST", uri);

    // multipart that takes file
    var multipartFile = new http.MultipartFile('file', stream, length,
        filename: basename(imageFile.path));

    // add file to multipart
    request.files.add(multipartFile);

    // send
    var response = await request.send();
    print(response.statusCode);

    // listen for response
    response.stream.transform(utf8.decoder).listen((value) {
      print(value);
      setState(() {
        //chips = getChips(value);
        texts = getTexts(value);
        isOffStaged = false;
        _controller.forward();
        print(isOffStaged);
      });
    });
  }

  List<Widget> getTexts(String value) {
    List<String> doggos = value.split(",");
    List<Widget> doggoChips = List<Widget>();
    doggoChips.add(Align(
      alignment: Alignment.centerRight,
      child: IconButton(
        icon: Icon(Icons.close),
        onPressed: () {
          setState(() {
            _controller.reverse();
            Future.delayed(Duration(milliseconds: 300)).then((v) {
              setState(() {
                isOffStaged = true;
                showpic = true;
                _bottomPosition = 0;
              });
            });
          });
        },
      ),
    ));
    for (int i = 0; i < doggos.length - 1; i++) {
      doggoChips.add(
        Padding(
          padding: i == 0
              ? EdgeInsets.only(bottom: 8.0)
              : EdgeInsets.symmetric(vertical: 8.0),
          child: Text(
            doggos[i].replaceRange(0, 1, doggos[i][0].toUpperCase()),
            style: TextStyle(fontSize: 20),
          ),
        ),
      );
    }
    return doggoChips;
  }

  @override
  Widget build(BuildContext context) {
    // if (!controller.value.isInitialized) {
    //   return Container();
    // }
    final size = MediaQuery.of(context).size;
    final deviceRatio = size.width / size.height;
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: Stack(
          alignment: Alignment.bottomCenter,
          children: <Widget>[
            Offstage(
                offstage: !showpic,
                child: controller.value.isInitialized
                    ? Transform.scale(
                  scale: controller.value.aspectRatio / deviceRatio,
                  child: Center(
                    child: AspectRatio(
                      child: CameraPreview(controller),
                      aspectRatio: controller.value.aspectRatio,
                    ),
                  ),
                )
                    : Container()),
            AnimatedPositioned(
              bottom: _bottomPosition,
              duration: Duration(milliseconds: 300),
              left: 0,
              right: 0,
              curve: Curves.easeInOut,
              child: Container(
                color: Colors.black45,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: <Widget>[
                    IconButton(
                      icon: Icon(
                        Icons.photo,
                        color: Colors.white,
                      ),
                      onPressed: () {},
                    ),
                    IconButton(
                      icon: Icon(
                        Icons.camera,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        setState(() {
                          _bottomPosition = -200;
                        });
                        _takePicture().then((imageFile) {
                          setState(() {
                            showpic = false;
                          });
                          upload(imageFile);
                        });
                      },
                    ),
                    IconButton(
                      icon: Icon(
                        Icons.loop,
                        color: Colors.white,
                      ),
                      onPressed: () {
                        currentCamera = (currentCamera + 1) % cameras.length;
                        controller = CameraController(
                            cameras[currentCamera], ResolutionPreset.high);
                        controller.initialize().then((_) {
                          if (!mounted) {
                            return;
                          }
                          setState(() {});
                        });
                      },
                    ),
                  ],
                ),
              ),
            ),
            Offstage(
                offstage: showpic,
                child: _file == null
                    ? Container()
                    : Stack(
                  children: <Widget>[
                    Image.file(
                      _file,
                      fit: BoxFit.fitHeight,
                      height: MediaQuery.of(context).size.height,
                      width: MediaQuery.of(context).size.width,
                    ),
                    SizedBox.expand(
                      child: Container(
                        color: Colors.black45,
                        child: Center(
                          child: isOffStaged == true
                              ? Container(
                            height: 50,
                            width: 50,
                            child: CircularProgressIndicator(),
                          )
                              : Container(),
                        ),
                      ),
                    ),
                  ],
                )),
            Offstage(
              offstage: isOffStaged,
              child: SlideTransition(
                position: _drawerDetailsPosition,
                child: Card(
                  color: Colors.blue.shade300,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(20)),
                  margin: EdgeInsets.all(10),
                  child: Container(
                    width: double.infinity,
                    child: Padding(
                      padding: const EdgeInsets.symmetric(
                          vertical: 8.0, horizontal: 24),
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: texts,
                      ),
                    ),
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

The flutter tutorial  is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application

For more information about Flutter. visit www.fluttertutorial.in