I'm having difficulties to make the widgets fits bigger screen when I run it in Emulator and physical device. But it fits perfectly and look good in smaller screen both when i run it in emulator and physical device
This is the first time im trying flutter, and i have made the UI from figma then later converted the design to flutter. it worked well but only on small screen, the moment I tried on bigger screen and emulator the texts and all the components stayed the same instead of following the size of the screen
and this is the coding, (this is automatically from flutlab when i want to convert from figma to flutter). im looking for any help either from this code below or even thru figma on how to make the design responsive and it fits into the screen automatically on any devices. thank you so much for all your help
class GeneratedAndroidLarge35Widget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Material(
child: ClipRRect(
borderRadius: BorderRadius.zero,
child: Container(
width: 360.0,
height: 800.0,
child: Stack(
clipBehavior: Clip.none,
fit: StackFit.expand,
alignment: Alignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.zero,
child: Container(
color: Color.fromARGB(255, 238, 240, 244),
),
),
Positioned(
left: null,
top: null,
right: null,
bottom: null,
width: 327.0,
height: 662.0,
child: TransformHelper.translate(
x: -0.50, y: 4.00, z: 0, child: GeneratedFrame112Widget()),
)
]),
),
));
}
}
Related
I have some experience in Java code, and I am familiar with linear code style where command follows by command, but I can't understand how to write Flutter code with inherited widgets style - my code tends to have hundreds of lines for every widget.
I faced with few constraints:
line length limited to 80 chars
trailing comma is required
So my average code looks like this one:
child: Column(
children: <Widget>[
if (widget.headerWidget == null)
const SizedBox(
height: 14,
),
AnimatedContainer(
foregroundDecoration: BoxDecoration(
color: getForegroundColor(),
),
child: Row(
children: <Widget>[
(widget.isFeed)
? (widget.isNew
? Flexible(
flex: 0,
child: Padding(
padding:
const EdgeInsets.only(
left: middlePadding,
top: middlePadding,
),
child: Container(
height: xSmallPadding,
width: xSmallPadding,
decoration: BoxDecoration(
color: AppColors.magenta,
borderRadius:
BorderRadius.circular(
xxSmallPadding,
),
),
),
),
)
: SizedBox(
width:
widget.isViewed ? 0 : 24.0,
))
: const SizedBox(),
And simple widget become 500+ lines in height. How to avoid it?
you can split your code to small widgets (in flutter every thing is a widget) , there's an easy way for that in android studio you can right click on a widget name like a row and then choose refactor after this choose extract flutter widget , by this you will get all the work done and it will be converted to a flutter widget class ,
also you can extract flutter method but i preferer the flutter widget class so you move it to another file.
I am trying to get a text label with graphics over the image. Labels like new arrival, best seller, limited, on sale just like on the pic attached.
enter image description here
Here's what i think the skeletal layout would be :
return Stack(
children: [
Card(
color: Colors.black54,
child: Image.asset('assets/xyz.png'),
),
Align(
//for bottomRight
alignment: Alignment.bottomRight,
child: Image.asset(
'assets/fireimg.png',
), //can be an SVG converted to png
),
Align(
//for topLeft
alignment: Alignment.topLeft,
child: Image.asset(
'assets/label.png',
), //can be an SVG converted to png
),
],
);
Feel free to give the Padding of your choice.
it has so much code to write , so i will give some examples to achieve that output
in this image ,i mentioned 0 and one .
for all 1
solution 1
you can use image like this way
Stack(
children: [
Container(
width: 200,
height: 200,
color: Colors.amber,// added only for view this example
child:Image() // add Product image here
),
Positioned(
top: 20, //change according to your use case position
left: 0,// change according to your use case position
child: Container(
color: Colors.black, // added only for view this example
decoration: BoxDecoration(image: ),// add label image here
width: 100,
height: 50,
child: Row(
children: [Text('hi')],
),
))
],
)
solution 2
you can use custom paint for label layout
not that
in both solution you have to use stack and position widgets , you can control position according to your use case
for all 0
you can use RotationTransition widgets to achieve this
not that
you have to use stack and position widgets , you can control position according to your use case
for the vertical Text
use this example
String exText = "meta";
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('hi'),
),
body: Container(
width: 200,
height: 200,
color: Colors.amber,
child: Column(
children: exText.characters
.map((e) => Container(
child: Text('$e'),
))
.toList()),
),
out put will be
Basically I need to create some kind of Snackbar widget that can be created on any page. So I need to make it positioned relative to the screen. The only idea is to create the main Stack widget which will wrap all other pages. Do you have any other ideas? I found pretty similar question without any interesting answers
By using Mediaqueryto retrieve the screen size.
For example we can the screen width like this :
MediaQueryData screenSize = MediaQuery.of(context).size.width;
let's say i want my container's size to take up half the screen's size
One way to go about it is like this :
Container(
height: MediaQuery.of(context).size.height/2,
width: MediaQuery.of(context).size.width/2,
child: Text('This container is half this device screen's size');
);
What you are going for here is using the Positioned widget
Let's take the last example and leave a quarter of the screen on every side :
Container(
height: MediaQuery.of(context).size.height/2,
width: MediaQuery.of(context).size.width/2,
child: child: Stack(
children: <Widget>[
Positioned(
left: MediaQuery.of(context).size.width/4,
top: MediaQuery.of(context).size.height/4,
right: MediaQuery.of(context).size.width/4,
bottom: MediaQuery.of(context).size.height/4,
child: Text('This container is half this device screen's size'),
),
],
),
I have a list of card widgets inside a row or listview. When clicking on of these cards i want to create an effect where the card grows and moves to the middle of the screen, and the rest of the screen appears below a grey overlay.
These example images should help you understand what i'm trying to explain.
Image #1 - List before Clicking in any card
Image #2 - After clicking a card. The card animates in size and position to the center of the screen. Everything else gets becomes dark. (Ignore bad Photoshop).
I'm not asking for full code or anything, just want to know if it's possible to move a widget outside it's parent and get some ideas of how to achieve this effect. I know AnimatedContainer can be used on the card to make it grow, the positioning part is what need help with. Thanks!
You can use the transform: argument on a Container()
Full Working Example
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Container(
color: Colors.black87,
margin: EdgeInsets.only(top: 100),
child: Row(
children: <Widget>[
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
transform: Matrix4.translationValues(0, 50, 0),
color: Colors.red,
height: 100,
width: 100,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
color: Colors.red,
height: 100,
width: 100,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 16),
color: Colors.red,
height: 100,
width: 100,
),
],
),
)
)
);
}
}
The #2 Animation can be accomplished by using a Hero() Widget and Overlay(). Or you can use a custom DialogBuilder just a few Suggestions to get you started.
I am trying to replicate a ui in flutter . Image is given below . But I am having hard time to figure out how to get the bottom design of the box . The Content inside is not important . What I want is the box style .
Right now what I am thinking is creating two widget . One with this
and remaining in another widget . Is there better alternative to do this
Can anyone help me how to achieve this . Thanks in advance
I could achieve the result in the image below in the way you described.
I used a Container to create the two boxes and set the decoration to create the top radius border. Placing the two items in a Column won't work because they need to overlap each other.
To achieve this behavior you will need to use Stack and Positioned.
The code is described below:
Widget _buildBox(Color boxColor) {
return Container(
margin: EdgeInsets.symmetric(horizontal: 10.0, vertical: 20.0),
decoration: BoxDecoration(
color: boxColor,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(40), topRight: Radius.circular(40))),
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Login'),
),
body: Stack(
alignment: Alignment.topCenter,
children: <Widget>[
Positioned(
child: _buildBox(Colors.deepPurple),
width: 400.0,
height: 300.0,
),
Positioned(
child: _buildBox(Colors.purpleAccent),
top: 200.0,
width: 400,
height: 200,
)
],
),
);
}