I've been building an app in flutter for the past while and recently I added camera functionality. I've a button on my home page that directs me to a camera page with the camera preview, on the camera preview page I have a home icon which directs back to the home page.
I've noticed when I click the home page from the camera page it doesn't render correctly, I've multiple calls to the home page throughout the project and they all work fine its only when accessing from the camera page. I added then((value) => setState(() {})); to try and reset the state of the home page and I can see its being called but with no luck regarding the rendering[![enter image description here][1]][1] I've added a picture of the Home Screen render issue, its worth noting im getting no errors on Xcode.
Camera screen code:
import 'package:camera/camera.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:moodful/Screens/HomeScreen/home_screen.dart';
import 'package:moodful/Screens/Login/login_screen.dart';
import 'package:moodful/main.dart';
import '../constants.dart';
class CameraPage extends StatefulWidget {
final List<CameraDescription>? cameras;
const CameraPage({this.cameras, Key? key}) : super(key: key);
@override
_CameraPageState createState() => _CameraPageState();
}
class _CameraPageState extends State<CameraPage> {
late CameraController controller;
// used to increment camera switch tap
int cameraIconTap = 0;
XFile? pictureFile;
@override
void initState() {
super.initState();
controller = CameraController(
widget.cameras![0],
ResolutionPreset.veryHigh,
);
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
}
@override
void dispose() {
controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
var size = MediaQuery.of(context).size;
if (!controller.value.isInitialized) {
return const SizedBox(
child: Center(
child: CircularProgressIndicator(),
),
);
}
return Scaffold(
appBar: AppBar(
backgroundColor: kPrimaryColor,
centerTitle: true,
title: Text('AppBar'),
leading: IconButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => HomeScreen()),
).then((value) => setState(() {}));
print("refresh done ");
},
icon: Icon(Icons.home),
),
actions: [
IconButton(
onPressed: () {
//increment on tap, calculate modulus, pass to widget.camera. 0 == rear camera, 1 == front camera
cameraIconTap++;
int modulusTap;
modulusTap = cameraIconTap % 2;
if (widget.cameras!.length > 1) {
setState(() {
controller = CameraController(
widget.cameras![modulusTap], ResolutionPreset.veryHigh);
});
controller.initialize().then((_) {
if (!mounted) {
return;
}
setState(() {});
});
} else {
ScaffoldMessenger.of(context).showSnackBar(const SnackBar(
content: Text('No secondary camera found'),
duration: Duration(seconds: 2),
));
}
},
icon: const Icon(Icons.cameraswitch),
),
],
),
body: Center(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(8.0, 20.0, 8.0, 8.0),
child: Column(
children: [
Center(
child: SizedBox(
height: //400
size.height / controller.value.aspectRatio,
width: size.width * 1.3 / controller.value.aspectRatio,
child: AspectRatio(
aspectRatio: controller.value.aspectRatio,
child: CameraPreview(controller),
),
),
),
],
),
),
//),
Padding(
padding: const EdgeInsets.all(8.0),
child: ElevatedButton(
onPressed: () async {
pictureFile = await controller.takePicture();
setState(() {});
},
child: const Text('Capture Image'),
),
),
if (pictureFile != null)
Image.network(
pictureFile!.path,
height: 200,
)
//Android/iOS
// Image.file(File(pictureFile!.path)))
],
)));
}
}
Home Screen code:
import 'package:camera/camera.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:moodful/components/background.dart';
import 'package:moodful/Screens/Login/login_screen.dart';
import 'package:moodful/components/camera_screen.dart';
import 'package:moodful/main.dart';
class HomeScreen extends StatefulWidget {
HomeScreen({Key? key}) : super(key: key);
@override
State<HomeScreen> createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
Future<DocumentSnapshot<Map<String, dynamic>>>? _fetchedData;
@override
void initState() {
super.initState();
_fetchedData = getData();
}
@override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size;
return FutureBuilder(
future: _fetchedData,
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot<Map<String, dynamic>>> snapshot) {
if (snapshot.hasData) {
return BackgroundLogoRight(
text: "Home",
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
const Spacer(),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 10,
child: Text(
"${snapshot.data!.data()!["firstName"]} \n\n "
"Glad you're back, please enter a mood for today.\n\n "
"Be sure to check the insights page for the most up to date mood analysis\n\n"
"The more you know the more control you have",
style: TextStyle(color: Colors.black, fontSize: 15),
textAlign: TextAlign.center,
),
),
],
),
),
Expanded(
flex: 5,
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
GestureDetector(
onTap: () async {
await availableCameras().then(
(value) => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => CameraPage(
cameras: value,
),
),
),
);
}, // handle your image tap here
child: Image.asset(
"assets/images/recordMoodLogo.jpg",
width: size.width * 0.5,
fit: BoxFit.cover, // this is the solution for border
height: 110.0,
),
),
],
),
),
],
),
);
} else {
return CircularProgressIndicator();
}
},
);
}
Future<DocumentSnapshot<Map<String, dynamic>>> getData() async {
var currentUser = FirebaseAuth.instance.currentUser;
return await FirebaseFirestore.instance
.collection('USER_TABLE')
.doc(currentUser!.uid)
.get();
}
}
Thanks! [1]: https://i.stack.imgur.com/pbC0w.png
