i am doing my first steps with flare and flutter and right now its really nice to be able to put animations into flutter without coding them by hand. But i dont understand how to make the flare thingy responsive (how to support different screen sizes).
This is part of a splash screen:
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color.fromRGBO(250, 224, 61, 1.0),
body: Center(
child: Container(
child: FlareActor(
"assets/flare/splash.flr",
callback: (nameOfAnimation) =>
Navigator.pushReplacementNamed(context, "/login"),
fit: BoxFit.none,
animation: "splash",
)),
));
}
This works well on my iPhone X because the animation is designed for that size. Is there any way how a smaller device can be able to use this same flare animation? Testing this with iPhone SE resulted in a clipped animation.
I hope there is another way than creating several animations for several screen sizes.
Just add your animation as a child of a SizedBox and give it a width/height and you’ll be fine.
You can also use the MediaQuery.of(context).size.width or height to get the viewport dimensions and set your SizedBox to use a % of the screen accordingly, if you want to.
you can use MediaQuery with the current context of your widget and get width or height in your container or sizedbox like this
width: MediaQuery.of(context).size.width * 0.65
height: MediaQuery.of(context).size.width * 0.65
else If you have a single widget you can use a FractionallySizedBox widget to specify a percentage of the available space to fill
FractionallySizedBox(
widthFactor: 0.7,
heightFactor: 0.3,
child:FlareActor(
"assets/flare/splash.flr",
callback: (nameOfAnimation) =>
Navigator.pushReplacementNamed(context, "/login"),
fit: BoxFit.none,
animation: "splash",
)),
);
Related
there is a scenario that i have a circle and inside that circle i want to show some text. Both items are in a scrollable listview. i want to calculate the width of the parent and then give with to the inner children to be placed and shouldn't move backward or forward from its outer parent circle widget.
i have used stack widget to do so which works fine on a single device or screen but what about other screen sizes?
any suggestion according to this?
I asked yesterday the same concept question:
the FractionallySizedBox is super useful on those cases, it gives the width / height of a children based on the width / height of the parent:
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: ParentCircle(
height: 250,
width: 250,
color: Colors.red,
child: FractionallySizedBox(
widthFactor: .5,
heightFactor: .5,
alignment: FractionalOffset.center,
child: ChildCircle(),
),
),
),
),
);
}
}
this will give the ChildCircle a 50% width and 50% height of the ParentCircle
I want to make the SvgPicture take full width and height. Here is the current solution.
I have currently used double.infinity for width and height. However, I want to make it use the LayoutBuilder's constraints to make the image full width and height.
LayoutBuilder(
builder: (layoutBuilderContext, constraints) {
return Stack(
children: [
SvgPicture.asset(
'assets/images/welcome/bg-welcome-screen.svg',
fit: BoxFit.cover,
width: double.infinity,
height: double.infinity,
),
]),
})
However, that is not able to happen using constraints.maxWidth and constraints.maxHeight for sizing the SvgPicture. It takes full height but failes to take full width.
How can I size the image to full width without using double.infinity if possible. I really want it to take the full screen width and height as it is a background image for the app.
To take full size of stack use Positioned.fill, And to size the Stack widget, wrap Stack with SizedBox
SizedBox(
width: constraints.maxWidth,
height:constraints.maxHeight,
child: Stack(
children: [
Positioned.fill(
child: Text(""),
),
],
),
),
It is better to use LayoutBuilder on top level widget like scaffold's body for getting body size.
More about Stack
Have you tried using BoxFit.fill? That will fill the target width and height by distorting the image's original aspect ratio.
Good Evening,
I have been searching for many hours and can not find a solution.
I have set a full screen image and with a Stack I have Positioned several GestureDetectors.
I have succeeded to be able to press on a GestureDetector and call a Function.
The problem is that when the screen size changes, either to a new or older phone then the Image responds and covers the full screen but the Positioned() of course stay at the same place, thus the Image mappings are not correct any more.
Is there a way to make the Positioned be responsive? or Maybe a total different way achieving the desired outcome?
Please help me :)
class Overview extends StatelessWidget {
#override
Widget build(BuildContext context) {
double sh = MediaQuery.of(context).size.height;
double sw = MediaQuery.of(context).size.width;
return Scaffold(
drawer: AppDrawer(),
body: Stack(
children: <Widget>[
Container(
height: sh,
width: sw,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/images/ang7.png'),
fit: BoxFit.cover)),
),
Positioned(
left: 10,
top: 50,
child: IconButton(
icon: Icon(Icons.menu),
iconSize: 30,
color: Colors.white,
onPressed: () => Scaffold.of(context).openDrawer(),
),
Positioned(
left: left,
top: top,
child: GestureDetector(
// child: Icon(Icons.add_circle),
onTap: () => Navigator.push(context, MaterialPageRoute(
builder: (context) {
return Amenities(
tText[page][0],
tText[page][1],
tText[page][2],
);
},
)),
child: Container(
height: 35,
width: 50,
color: Colors.blue,
),
));
),
Posting my comment as an answer just in case it works and there are no better answers provided. Please up vote and mark as answered if it does. :-)
You could try experimenting with MediaQuery.of to determine the size of the device (height and width) and then use those values to scale the Positioned widgets position parameters up or down from your 'baseline' sizes. In theory that should (may) match how the background image has been scaled. Would probably need to scale the size of the Positioned widgets as well.
Update regarding your comment:
Not really. What I mean is that you would need to run MediaQuery.of on the device that you are happy with the UI layout, and record that device's width and height. You then use this width and height in your app and compare these 'baseline' values with what values you get when you run the app on other devices.
So:
Divide other-device-width by baseline-device-width to get your width scaling factor.
Divide other-device-height by baseline-device-height to get your height scaling factor.
Then use these scaling factors to 'scale' the Positioned widgets width (positioned-widget-width multiplied by width-scaling-factor) and height (positioned-widget-height multiplied by height-scaling-factor) and position on the screen (you would have to play around with the positioning values).
Sounds messy but it is just a bit of simple math.
Like I say, might not work or might not be the most elegant solution. There are so many different devices out there you will never really be able to completely test this. Might need to rethink you UI. Maybe some other people have ideas around that.
I am a beginner to Flutter and I tried creating a dummy login page. When I tried to run the app it was flawless on Pixel 3 XL but it was not good in Pixel 2 XL. How would I manage the responsiveness? I came across the MediaQuery widget, but how could I create a completely responsive app for each device? There are many variations among today's mobile devices (like notched display, fullscreen, etc) and thereafter comes the tablets. How could I manage this? Should I write code for each and every resolution?
Here is my design on Pixel 3 XL and Pixel 2 XL
You can use SingleChildScrollView as parent,
SingleChildScrollView(
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Stack(
),
),
);
Edit: Also remove fit: StackFit.expand, from Stack widget.
The reason behind this problem is the sizedbox widget with height 100px.
removing that and using mainaxisalignment as spaceevenly gives the required output.
Here is the modified code:
#override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomPadding: false,
body: Stack(
fit: StackFit.expand,
children: <Widget>[
bgimage,
Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
logoimage,
userName(),
password(),
forgotPassword(),
loginButton(),
googleSignIn(),
signUp()
],
),
],
),
);
}
This solves the problem.
Best easiest way to make responsive UI for different screen size is Sizer plugin.
Responsive UI in any screen size device also tablet.
Check it this plugin ⬇️
https://pub.dev/packages/sizer
.h - for widget height
.w - for widget width
.sp - for font size
Use .h, .w, .sp after value like this ⬇️
Example:
Container(
height: 10.0.h, //10% of screen height
width: 80.0.w, //80% of screen width
child: Text('Sizer', style: TextStyle(fontSize: 12.0.sp)),
);
I have build many responsive UI with this plugin.
Use this package flutter_next using this you design responsive UI even for desktop web and everything and they have an demo also so you can check there
How to Adjust the screen to all android devices screens in flutter. I have checked in stackoverflow but unfortunately i haven't got any satisfying answer.
Basically, Flutter automatically sets the height and width depending on the device sizes wherever possible. Example - if you have use a list view having 100 items then some devices may show 5 items at a time and some may show 6 items. It is automatically done by Flutter.
The problem comes only when you specify an absolute value for height and/or width. Let's say you've a widget and you specify width as 450. Now, it may fit on the bigger screens but on the small screen (e.g. width 400 points)then you'll see pixel overflow error in the UI.
Now, to solve this problem, you can use MediaQuery.of(context).size.height/width as suggested by LGM.
I think you have some questions about responsive layouts, so i will give you some examples with MediaQuery:
With MediaQuery you can get the device screen width:
double width = MediaQuery.of(context).size.width;
The height:
double height = MediaQuery.of(context).size.height;
as well as the orientation:
Orientation orientation = MediaQuery.of(context).orientation;
and also various information about the device, and then, you can base the layout on orientation, size etc.
Here's an example:
Container(
width: MediaQuery.of(context).orientation == Orientation.portrait ?
MediaQuery.of(context).size.width / 1.3 : MediaQuery.of(context).size.width / 2.1,
child: RaisedButton(
elevation: 0.0,
color: Colors.green,
child: Text("CONTINUE", style: TextStyle(color: Colors.white),),
onPressed: (){
//code of onPressed
);
}
),
),
You can use too Align, to define where the widget should be, Positioned, the properties of Column, Center etc.
One more example, using FittedBox to deal with texts:
#override
Widget build(BuildContext context) {
return Material(
child: SafeArea(
child: Scaffold(
body: ListView(
children: <Widget>[
FittedBox(child: Text("Test"),),
FittedBox(child: Text("Flutter Flutter Flutter"),)
],
),
),
),
);
}
The result:
Portrait:
Landscape: