Long story short, I use flutter's camera dependency. Everything works fine until it's time for the camera preview to show up, but it doesn't even though the camera hardware is activated already (I use emulator so I can see the webcam indicator lamp is active). When I hot reload it, the preview shows. I tried programmatical force rebuild but it doesn't work because the problem lays on the value of camera controller (that's what the output says).
Without further ado, here's my snippet
if (camCtrl == null || !camCtrl.value.isInitialized) {
return LoadingOverlay();
} else if (camCtrl.value.isInitialized) {
return Stack(
alignment: Alignment.bottomCenter,
children: [
SizedBox(
width: displayWidth(context),
child: camCtrl.value.isInitialized
? CameraPreview(camCtrl)
: LoadingOverlay(),
),
Padding(
padding: EdgeInsets.only(bottom: 20),
child: FloatingActionButton(child: Icon(Icons.camera), onPressed: () {}),
)
],
);
}
This happens due to the mishandling of Futures.
Try to go through your Code again.
I guess you have missed the await keyboard somewhere.
Also, you can use a FutureBuilder here.
If none helps, refer this - https://flutter.dev/docs/cookbook/plugins/picture-using-camera
Related
I have a very simple animation for a splash screen of a shaking jar that I made in Adobe After Effects and exported it via LottieFiles extension as json, it works normal but every couple of times when I open the app the animation glitches (see pictures below), I can't figure it out and have tried searching for a solution without any success. The problem is the glitching happens random (sometimes it's a couple of times in row when I open app, sometimes it's every x times). This was tested on multiple android devices with same result.
Code for splash screen:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: isDarkMode()? const Color(0xFF31302f) : const Color(0xFFfcfaf6),
body:
Align(
alignment: Alignment.topCenter,
child: Column(
children: [
SizedBox(height: height(context)*0.08),
Stack(
children: [
Image.asset(
isDarkMode()? 'assets/crnikruh.png' : 'assets/bijelikruh.png',
height: height(context)*0.3,
width: height(context)*0.3,
),
Padding(
padding: EdgeInsets.only(top: height(context)*0.01),
child: Lottie.asset(
'lottie/jaranimation.json',
width: height(context)*0.3,
height: height(context)*0.3,
frameRate: FrameRate.max,
fit: BoxFit.fill,
),
)
],
),
],
),
),
);
}
}
This is the normal view
This is the animation with the problem
I've found a workaround for this issue. It's not quite the solution but it works. So, I think the problem was it wasn't loading properly every time and the trick that helped me was that I wrapped the lottie asset with visibility widget and delayed the visibility by 50 milliseconds, so it got that extra 50 milliseconds on startup to properly load the asset.
All OrientationBuilder examples I could find use GridView.
I wanted to use Column and Row widgets instead.
This is a code excerpt I used. This works for portrait, but when I turn the phone to landscape, the widgets disappear, I just see background. Turning it back to portrait brings it back to normal.
What am I doing wrong here?
body: OrientationBuilder(builder: (context, orientation) {
if (orientation == Orientation.portrait) {
return Column(
children: [
Widget1(),
Widget2(),
Widget3(),
],
);
} else {
return Row(
children: [
Widget1(),
Widget2(),
Widget3(),
],
);
}
}),
Seems there is nothing wrong with my approach, it's just that my widgets don't fit the screen. Not sure why is nothing displayed, I'd expect something to be visible and yellow/black warning to be displayed.
Anyway, using a table with FractionColumnWidth forces the widgets to be rendered on screen even if they don't fit. Building UI with flutter is not going to be easy!
return Table(columnWidths: {
0: FractionColumnWidth(.25),
1: FractionColumnWidth(.5),
2: FractionColumnWidth(.25)
}, children: <TableRow>[
TableRow(children: [
Widget1(),
Widget2(),
Widget3(),
]),
]);
Please I need your help I have a mobile application, when am typing on the input fields, the keyboard covers the input fields and it doesn't scroll for user to input text. See below the code am talking about. Below is a sample could you tell where the issue is ? (Note this is a flutter app)
AppTextField(
controller: emailController,
focus: emailFocus,
textFieldType: TextFieldType.EMAIL,
decoration: inputDecoration(context, hint: appLocalization.translate('email')),
nextFocus: widget.phoneNumber != null ? null : passFocus,
errorThisFieldRequired: appLocalization.translate('field_Required'),
errorInvalidEmail: appLocalization.translate('email_Validation'),
maxLines: 1,
cursorColor: colorPrimary,
).paddingBottom(16),
return Scaffold(
resizeToAvoidBottomInset: **true**,
body: Container(
child: Stack(
children: [
Form(
This solution worked for me, by changing the value to true from my the code above. It was set to false.
N:B - I got the info from another thread. check the link some options there might also be helpful should incase any come across same issue.
Flutter Keyboard makes textfield hide
I followed this tutorial which explores creating a ui for a movie app
https://www.youtube.com/watch?v=OgSLd2lH1FM&feature=youtu.be
While most of the design I was able to recreate and add my own settings to,I face a problem in the Poster display side of the tutorial, Mainly that in the builder, It is specified that the pages to the right and left of the one in focus are inclined at 15 degrees.:
The poster view should look like this
The transform.rotate part works, but only after the user starts scrolling horizontally in the poster list.
before the scroll it looks like this:
What the carousel looks like before scrolling
This happens both in the simulator and a real device. Also I tried using transform.translate to see if that gives the same problem but it does not.
Below is a code snippet of the Animated builder.
Widget build(BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width,
padding: const EdgeInsets.symmetric(
vertical: kDefaultPadding / 2, horizontal: 0),
child: AspectRatio(
aspectRatio: 0.85,
child: PageView.builder(
itemCount: movies.length,
controller: _pageController // declared PageController type in class//,
onPageChanged: (value) {
setState(() {
// initialPage was initialised with value 1
initialPage = value;
});
},
itemBuilder: (context, index) => buildMovieCard(index),
),
),
);
}
The animatedBuilder calling function is below.
Widget buildMovieCard(int index) => AnimatedBuilder(
animation: _pageController,
builder: (context, child) {
double value = 0;
if (_pageController.position.haveDimensions) {
value = index - _pageController.page;
//0.038 since it time pi gives 7 so 7 rotaitons
value = (value * 0.038).clamp(-1, 1);
}
return Transform.rotate(
child: MovieCard(movie: movies[index]),
angle: math.pi * value,
);
});
(Sorry if the information above is Convoluted.. )
Do tell me if there are any errors in the way I have framed this question
EDIT: I tried searching a bit more, and found a similar question.
it seems that animations won't be executed until an animation plays for an animated builder.
I dont have too much experience in animated builder stuff so if I find something ill add it
Here is the link to the question
I Tried using a SingleTickerProvider and an animation controller with .repeat() to continuously run the animatedBuilder. The rotation now does appear automatically, but it takes some time.
Is your _pageController.page set correctly at the start?
What happens if you print value inside your if:
if (_pageController.position.haveDimensions) {
...
print(value);
}
(sorry I don't have the reputation to comment directly on the question on this account)
I did not quite understand the code, but according to the description you might try to simulate a scroll or see what exactly the scroll affects, and try to implement it.
Hope I helped.
I'm developing WebView mobile application in Flutter and I would like to customize webview errors, because if customer will have his wifi turned off and he got "net::ERR_ADDRESS_UNREACHABLE", it's not so good. So i would like to change this page to some custom design and show something like "This application requires internet connection, you should turn your wifi on"..
Is something like this possible? I was searching in docs and found nothing.
Thanks a lot.
Not sure if we can modify the actual message shown from the webview itself, but there is a workaround that I have used.
You can use a Stack widget and show a custom message in a separate widget whenever the error occurs. A sample code is below.
Stack(
children: [
if (!controller.isError)
WebView(
javascriptMode: JavascriptMode.unrestricted,
initialUrl: "https://some-random-url.com",
onPageFinished: controller.onLoaded,
onWebResourceError: controller.onError,
),
if (controller.isLoading)
Center(
child: CircularProgressIndicator(
valueColor: AlwaysStoppedAnimation<Color>(Colors.black),
),
),
if (controller.isError)
Center(
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0),
child: Text(
text: "Something went wrong, please try again",
),
),
)
],
),
The Controller object you see is a GetX controller which I use for state management, you are free to use whatever you like. The main action elements are
isError -> State variable which monitors if an error has occurred.
WebView.onWebResourceError -> Callback function called when a certain error occurs.
You can pass a function to this and this callback is only called when an error occurs. With this, you can then modify the state variable isError to be true, which will, in turn, hide the webview and show an error message at the center of the screen.
With this, you will have the error handling you are looking for.
PS: I know I am late for this answer, but I hope somebody else finds it useful.