Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 3 years ago.
Improve this question
I am designing an app in Flutter. I want to add elements from Right side rather than default left. Please guide how I can do this?
Just set the text direction.
Row(
textDirection: TextDirection.rtl,
children: <Widget>[
Container(
width: 40,
height: 40,
color: Colors.blue,
),
Container(
width: 40,
height: 40,
color: Colors.red,
),
Container(
width: 40,
height: 40,
color: Colors.green,
)
],
)
Example 2 with text
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
textDirection: TextDirection.rtl,
children: <Widget>[
Text("one"),
Text("two"),
Text("three"),
],
)
Related
i try to make camera preview using dark background with opacity and have card area in middle section which is has transparent background. It's look like showing Dialog in mobile device with dark background but the dialog have transparent background through dark background.
i already acomplished using column and row widget such as :
Column(
children : <Widget>[
Expanded(
child: Container(
color: Colors.Black54
)
),
Row(
children : <Widget>[
Expanded(
child: Container(
color: Colors.Black54
)
),
CardWidget(
width: cardWidth,
height: cardHeight,
Color: Colors.Transparent
),
Expanded(
child: Container(
color: Colors.Black54
)
),
]
),
Expanded(
child: Container(
color: Colors.Black54
)
),
]
)
But i wonder is there a simple way such as :
Container(
color: Colors.Black54,
child: center(
child: CardWidget(
width: cardWidth,
height: cardHeight,
background: Colors.Transparent
)
)
)
Please let me know if there is another way to make it simple like code above. Thanks
Are you trying to do something like this ?
If yes, here is the code :
new Container(
decoration: new BoxDecoration(
border: Border(
top: BorderSide(width: 300, color: Colors.grey[700]),
left: BorderSide(width: 100, color: Colors.grey[700]),
right: BorderSide(width: 100, color: Colors.grey[700]),
bottom: BorderSide(width: 300, color: Colors.grey[700]),
),
color: Colors.transparent),
)
I don't understand why this FAB doesn't center it's child. I've tried different things but cannot make it to center perfectly. Because adding for example padding only bottom to the icon could make it center on a Device but maybe not for all.
this is my code
Theme(
data: Theme.of(context).copyWith(
highlightColor: Colors.red, splashColor: Colors.red),
child: SizedBox(
height: MediaQuery.of(context).size.height / 7,
width: MediaQuery.of(context).size.height / 7,
child: FloatingActionButton(
elevation: 100,
shape: new CircleBorder(
side: new BorderSide(
color: Colors.black, width: 5.0)),
backgroundColor: Colors.orangeAccent,
onPressed: () {},
child: new Icon(
FontAwesomeIcons.chevronUp,
size: 80,
)),
),
),
and this is the not centered FAB with it's icon child.
does it seems only to me that the icon isn't centered?
Same code with Icons.person
same code with Text widget
Same code with chevronCircleUp
I've used Show Debug Paint by the way. And I've used chevronCircleUp, just to see clearly the area of widget. I think you are right, it's not centered enough, however, this examples made me think that the problem is related to FontAwesome icons.
There are also this issues
Font Icon Render Box not large enough for some characters
Rectangular icons are centered incorrectly
So I've applied the workaround on the first issue, here is the code. It must be good enough now.
Theme.of(context)
.copyWith(highlightColor: Colors.red, splashColor: Colors.red),
child: SizedBox(
height: MediaQuery.of(context).size.height / 7,
width: MediaQuery.of(context).size.height / 7,
child: FloatingActionButton(
elevation: 100,
shape: new CircleBorder(
side: new BorderSide(color: Colors.black, width: 5.0)),
backgroundColor: Colors.orangeAccent,
onPressed: () {},
child: Text(
String.fromCharCode(
FontAwesomeIcons.chevronUp.codePoint),
style: TextStyle(
fontSize: 72.0,
fontFamily: FontAwesomeIcons.chevronUp.fontFamily,
package: FontAwesomeIcons.chevronUp.fontPackage)),
)),
),
Edit after 3 years:
Issue still exists with Material icon (Icons.ios_share) on Flutter 2.10.0
Sorry guys (really new to flutter and dart) but I was wondering how I could have a CircleAvatar on the right side of the screen (below the app bar) and some text on the left side, just across from it. Thanks in advance for your help! I have pasted the code that I made for the text on the left side (below the appbar). I know its probably a super simple question to most of you guys but for me it's not because I haven't gotten to grips with dart/flutter yet.
body: Column(
children: <Widget>[
Align(
alignment: Alignment.centerLeft,
child: new Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 7),
child: new Text(
'My Briefing',
style:
new TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
),
),
Something like this would do what you are looking for:
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 7),
child: Text(
'My Briefing',
style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold),
),
),
CircleAvatar(),
],
)
By the way, starting dart 2, you can drop the "new" key word at the begging of each newly created classes.
I need to rotate a text inside a card. What I would like to obtain is this:
But I don't know how can i do this with flutter. The problem I am facing is that the text view exceeds the card.
Here is what I have so far:
Widget cardDetails(String title, String imgPath) {
return Material(
elevation: 8.0,
borderRadius: BorderRadius.circular(15.0),
child: Container(
height: 135.0,
width: 135.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8.0), color: Colors.white),
child: Stack(
alignment: Alignment.topLeft,
children: <Widget>[
Transform.rotate(
angle: -pi / 4,
child: Container(
height: 15.0,
width: 55.0,
alignment: Alignment.topCenter,
color: const Color(0xFFFFd77B),
child: Text(
title,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 12.0,
),
),
),
),
],
),
),
);
}
And here it's how it looks like:
Thanks in advance
The simplest way to make a banner is to use the Banner widget. However, it still paints outside the bounds of the item you're using, and unfortunately is not nearly as configurable as it could be (and doesn't handle things like longer text).
To fix the painting outside the bounds, all you need to do is add a ClipRect right under your card widget, and that should fix the overflow with the Banner widget or for what you're doing with the rotated box.
Depending on how configurable you need the banner to be, you could re-implement the Banner widget - using TextPainter you could figure out the length of the text and resize automatically based on it if need be (and to remove the dropshadow...)
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
How can I make a widget like in the image
and how to control the degree
The shape 2
This will generate UI as you required
Widget build(BuildContext context) {
return new Container(
height: 100.0,
margin: new EdgeInsets.all(10.0),
decoration: new BoxDecoration(borderRadius: new BorderRadius.all(new Radius.circular(10.0)),
gradient: new LinearGradient(colors: [Colors.yellow[700], Colors.redAccent],
begin: Alignment.centerLeft, end: Alignment.centerRight, tileMode: TileMode.clamp)),
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
child: new Icon(Icons.cloud, color: Colors.white70,),
),
new Expanded(child: new Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
new Text('New York', style: new TextStyle(fontSize: 20.0, color: Colors.white70, fontWeight: FontWeight.bold),),
new SizedBox(height: 8.0,),
new Text('Sunny', style: new TextStyle(fontSize: 12.0, color: Colors.white70),),
],)),
new Padding(padding: new EdgeInsets.only(left: 10.0, right: 10.0),
child: new Text('12°', style: new TextStyle(fontSize: 30.0, color: Colors.white70),),)
],),
);
}
If you are looking for linear gradient then you can use LinearGradient in Container.
new Container(
child: new Text('Hello'),
decoration: new BoxDecoration(
gradient: new LinearGradient( // <-- This is what you need to do
colors: [
Colors.red[200],
Colors.red
],
begin: Alignment.centerLeft,
end: Alignment.centerRight,
),
borderRadius: new BorderRadius.all(
new Radius.circular(10.0)
)
),
padding: new EdgeInsets.all(20.0),
margin: new EdgeInsets.all(20.0),
)
If you wish to have custom design boxes Container is what you'll need.
NOTE: Always check the docs first. https://docs.flutter.io