Building a Camera App with Flutter.
Hi Flutter friends, today I want to show you how to build a simple camera application with flutter. So sit tight, “get your code editor” and let's begin.
How will it work?🤔
This is how our simple camera will work. When the user takes a picture, the camera redirects the user to a preview page where he can share it with friends or contacts. Basically we will have two screens, the camera screen and, the preview screen. In the Camera screen, we’ll have two buttons, a capture button and toggle button(to switch the camera direction— front or back). Also in the preview screen, we only need a share icon button by which when tapped prompts a share widget.
First things first.
We’ll need a couple of packages as we build, so head on to pub.dev and get these packages below:
Make sure to run:
flutter pub get👍Now head over to AndroidManifest.xml. You can find this file in app/src/main. Paste the below permission inside your AndroidManifest.xml file just above the application tag:
👍In the lib folder, create a new folder named screens. Inside it, create a new file and name it camera.dart.
Create a Stateful widget inside the camera.dart file like this below and make sure to import material.dart:
The first thing we will need to do is to define the following:
— CameraController: this is responsible for establishing a connection to the device camera.
— List cameras: this will hold a list of all the cameras available on the device. Usually, the length of the list is 2, which is the front and back camera. Index 0 is for the back and index 1 is for the front.
— int selectedCameraIndex: this will hold the current camera index the user has selected.
Then we’ll create a method to initialize the camera object which should be done asynchronously hence the return type would be a future.
Camera Preview Widget
Now, we’ll create a cameraPreview: this will return a CameraPreview widget if the camera controller object is initialized successfully else it will return a loading screen.
Camera Control Widget
Next, we’ll create a camera control widget, this widget is responsible for taking pictures when tapped it captures what the camera is viewing.
Camera Toggle
This widget is responsible for holding the toggle button, which can be used to toggle between the front and back cameras.
Now find below every other widget needed in camera.dart file before we dive into the build method. Also, look closely to see the initState function. In the initState function we call the initCamera function inside a future method which checks for device available cameras.
The Build Widget
Take a critical look at the build method below, we have created a Scaffold widget which a child of Container. The Container has a child of Stack. Inside the Stack, we’ll add two Align widgets. The first Align widget should have an alignment of center and a child of cameraPreview(). The second Align widget will have an alignment of bottomCenter and a child of Row. The Row then takes in two widgets which are cameraToggle() and cameraControl().
Preview Page
We are now done with our Camera Page but left with one more page, the preview page.
Now create a new file inside the screens folder and name it preview.dart. and paste the code below inside it.
Now run the app🎉 congratulations you’ve successfully built your first camera app. Also, remember to add this to your resume 😉
You can get the full source code here:
That’s it for this article! I hope you enjoyed it, and be sure to follow me here and on twitter for more Flutter articles and comment for any feedback you might have about this article.
