Please see my code and scree shot below. I want locate Text("to be center") at center horizontally, but comparatively located right side as showen below.
I understand i'ts because I'm using expanded widget and set flex 1 & 4 and Text("to be center") are inclueded in latter block.
How can I located totally or relatively center but using expandede & flex property like this case ?
Also I understand I can adjust it by wrapping Text() with padding and set EdgeInsets.only(right:X) but I can not figure out if it is totally cenerized or not...
Row(
children: [
Expanded(
flex:1,
child:TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex:4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(
),
child: Text("to be center",style: MyText(myFontSize: 15).style()),
)
),
],
),
Just use Spacer at the end inside Row
Row(
children: [
Expanded(
flex: 1,
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
color: MyStyle.textColor,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
Expanded(
flex: 4,
child: Container(
alignment: Alignment.center,
decoration: const BoxDecoration(),
child: Text(
"to be center",
style: MyText(myFontSize: 15).style(),
),
),
),
// like this
const Spacer(),
],
),
Learn more about the Spacer widget
Try below code: refer layout
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
child: TextButton(
style: TextButton.styleFrom(
alignment: Alignment.centerLeft,
),
child: const Icon(
Icons.close,
),
onPressed: () {
Navigator.of(context).pop();
},
),
),
const Expanded(
child: Center(
child: Text(
'to be center',
),
),
),
const Expanded(child: SizedBox())
],
),
Result->
The simple solutions could be:
Use textAlign attribute of Text widget or
Wrap Text widget with Center widget inside Expanded widget or
You can even explore the widget IntrinsicWidth with Center widget.
Related
I am very new to Flutter and I trying to make button fill the entire parent container. I want to create two buttons each of them 50% of device height and 100% width using two Flexible with flex parameters.
This is What I have:
Flexible(
flex: 1,
child: Container(
color: Color.fromARGB(255, 20, 20, 20),
alignment: Alignment.center,
child: ElevatedButton(
child:Text('$_counter1'),
onPressed: _pop1,
),
),
),
Everyday I create websites using CSS and HTML and here in Flutter everything works completly diferent. It's hard to understand the code at the begining. With CSS I cloud only add 100% width and height and done but here I am little bit lost.
This is What I am trying to get:
With flutter, you can use Column, Expanded
Column(
children: [
Expanded(
flex: 1,
child: Container(
color: const Color.fromARGB(255, 20, 20, 20),
alignment: Alignment.center,
child: ElevatedButton(
child: Text('Button 1'),
onPressed: (){},
),
),
),
Expanded(
flex: 1,
child: Container(
color: Colors.green,
alignment: Alignment.center,
child: ElevatedButton(
child: Text('Button 2'),
onPressed: (){},
),
),
),
],
)
you are almost right. Flexible takes only the needed space. if you want to takes all space available like 100% then you need to add another properties for Flexible :
https://stackoverflow.com/a/52646036/12838877
Flexible(
fit: FlexFit.tight,
child: Foo(),
);
or is just shorthand with Expanded
Flexible(
fit: FlexFit.tight,
child: Foo(),
);
for comparison : reff
as you can see, Flexible will only take as minimum space needed.
and by default expanded will take 100% available space.
if you want to modify, you just change the flex value
You could combine Column with cross axis alignment strech to achieve this.
Like so:
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: Container(
color: Colors.grey,
child: TextButton(
onPressed: () {},
child: Text(
'Button 1',
style: Theme.of(context).textTheme.headline2!.copyWith(
color: Colors.grey.shade700,
),
),
),
),
),
Expanded(
child: Container(
color: Colors.grey.shade700,
child: TextButton(
onPressed: () {},
child: Text(
'Button 2',
style: Theme.of(context).textTheme.headline2!.copyWith(
color: Colors.grey,
),
),
),
),
),
],
Running example:
https://dartpad.dev/?enchanted-pomelo-5708
thanks for opening the question, I am learning the flutter and I am learning about the button, I want to make the following design in the flutter
but am not able to find any widget which can be used, there is something the icon in the elevated button which I have used but I am not able to achieve the design.
using the elevatedButton.icon
return SizedBox(
width: double.infinity,
height: 48,
child: ElevatedButton.icon(
icon:Icon(
prefixIcon, // passing from the main widget
),
onPressed: () => {},
label: Text(text),
style: ElevatedButton.styleFrom(
primary: backgroundColor
),
),
);
}
}
Try to below answer hope its helpful to you
Container(
width: 250,
height: 50,
margin: const EdgeInsets.all(5),
child: ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Icon(Icons.login), //use your google image here
Text('Sign in with Google '),
Opacity(
opacity: 0,
child: Icon(Icons.login),
)
],
),
style: ElevatedButton.styleFrom(
primary: Colors.red,
),
),
),
Your Button look like this->
you can use this to achieve your desired widget:
Container(
width: 256,
height: 48,
margin: const EdgeInsets.all(8),
child: ElevatedButton(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: const <Widget>[
Icon(Icons.login), // your google image
Expanded(child: Center(child: Text('Sign in with Google'))),
],
),
style: ElevatedButton.styleFrom(primary: Colors.red),
onPressed: () {},
),
);
Hi trying to figure out why my hamburger is getting misaligned when i add another Expanded() code within the body.
I tried to follow this url to develop a hamburger menu and responsive for all platforms at once.
Flutter Blog
Below is the code that i tried where i added Expanded() below the Row()
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
#override
Widget build(BuildContext context) {
final width = MediaQuery.of(context).size.width;
return Scaffold(
key: _scaffoldKey,
drawer: AppDrawer(),
body: Row(
children: [
Row(
children: [
Padding(
padding: const EdgeInsets.all(16),
child: IconButton(
icon: Icon(Icons.menu, size: 30),
onPressed: () {
_scaffoldKey.currentState.openDrawer();
}),
),
],
),
Expanded(
child: Container(
width: width,
child: Column(
children: [
Expanded(
child: Lottie.network(
'https://assets2.lottiefiles.com/datafiles/6WfDdm3ooQTEs1L/data.json'),
),
Expanded(
child: Column(
children: [
Flexible(
child: Text(
"Multivariate Testing",
style: GoogleFonts.montserrat(
fontSize: 50,
),
),
),
SizedBox(
height: 10,
),
Flexible(
child: Text(
'Run experiments to make key flows more effective.',
style: GoogleFonts.montserrat(
fontSize: 25,
),
),
),
SizedBox(
height: 35,
),
// ignore: deprecated_member_use
TextButton(
onPressed: () {},
child: Text(
'Create Experiment',
style: GoogleFonts.montserrat(
fontSize: 20,
),
),
)
],
),
),
],
),
),
)
],
),
);
}
}
and the output that i am seeing from mobile view. Appreciate any help. Sorry for too big screenshot!
This is because of the default functionality of Row.
So change your first child for your top level Row to this,
Scaffold(
key: _scaffoldKey,
drawer: AppDrawer(),
body: Row(
children: [
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: const EdgeInsets.all(16),
child: IconButton(
icon: Icon(Icons.menu, size: 30),
onPressed: () {
_scaffoldKey.currentState.openDrawer();
})),
),
Expanded( ...... rest of your code
Here, we are using the Align widget with alignment: Alignment.topCenter.
Align widget takes the entire available space in the parent and then depending on the alignment property, aligns it't child inside it.
So, saying Alignment.topCenter will place it at the top vertically and middle horizontally.
Using an AppBar will unnecessarily complicate your situation since now, the AppBar is going to take up space a the top, but in your case, you want your Lottie view to be visible at the top, so it will overlap.
Because Expanded fills up the whole space and that's why your hamburger is getting misaligned.
Why don't you try using appbar for the hamburger?
I want to display a List and beneath it a Persistent footer, a Column with some rows. I use persistentFooterButtons of Scaffold.
The closest to what I get is this:
But I am unable to align the fields to the right.
When I work with Align or Spacer, the Widgets disappear.
The content of persistentFooterButtons.
FittedBox(
child: Column(
children: <Widget>[
FlatButton(
onPressed: () {
Navigator.pushNamed(context, RouteName.BAUSTELLEN);
},
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Bestellen'),
),
),
Row(
children: <Widget>[
Text('$priceInfo '),
MyFutureBuilder(
future: sum,
builder: (context, double sum) {
var mySum = formatDoubleNumber(sum);
return Text('$mySum');
},
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
Row(
children: <Widget>[
Text('Ihr Einkaufsrahmen '),
Text(
'$einkaufsrahmen',
style: TextStyle(
color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
],
),
);
If I put the elements directly to persitentFooterButtons, this is what I get, the text is scattered around and my list is not shown.
and the Code
Scaffold(
body: WarenkorbListe(),
persistentFooterButtons: <Widget>[
// WarenkorbFooter(),
FlatButton(
onPressed: () {
Navigator.pushNamed(context, RouteName.BAUSTELLEN);
},
child: Align(
alignment: Alignment.bottomLeft,
child: Text('Bestellen'),
),
),
Row(
children: <Widget>[
Text('$priceInfo '),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
Row(
children: <Widget>[
Text('Ihr Einkaufsrahmen '),
Text(
'$einkaufsrahmen',
style: TextStyle(
color: einkaufsrahmen == 0 ? Colors.red : Colors.black),
),
Container(
width: ImpexStyle.horizontalPadding,
),
],
),
],
);
Try to align with your column instead
FittedBox(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end, // this
children: <Widget>[
So I'm trying to remove the bottom margin of raisedButton so it will look like it is merged with the card below it.
here's what it looks like
here is my code
Expanded(
child: Card(
elevation: 5,
// shape:
// RoundedRectangleBorder(borderRadius: BorderRadius.circular(22)),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: Text("Apakah anak sudah bisa ... ?",
style: TextStyle(fontWeight: FontWeight.bold)),
),
],
),
Row(
children: <Widget>[
Expanded(
child: RaisedButton(
child: Text(
"Iya",
style: TextStyle(color: Colors.white),
),
color: Colors.green[300],
onPressed: () {}),
),
Expanded(
child: RaisedButton(
child: Text(
"Tidak",
style: TextStyle(color: Colors.white),
),
color: Colors.red[200],
onPressed: () {}))
],
)
],
),
),
)
or do you guys have any other alternative solution to achieve that?
You can explicitly set your Row height to match the height of your RaisedButton. Simply wrap it inside a Container and add the height attribute.
If you want to, you can access the default height by using Theme.of(context).buttonTheme.height. Theme.of returns the ThemeData used in the current context.
Here a minimal example:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: Center(
child: Container(
child: Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Test'),
Container(
height: Theme.of(context).buttonTheme.height,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
RaisedButton(
onPressed: () {},
child: Text('Yes'),
color: Colors.green,
),
RaisedButton(
onPressed: (){},
child: Text('No'),
color: Colors.red,
)
],
),
),
],
)
),
),
)),
);
}
}
I had the same problem. NikasPor's answer didnt work for me, unfortunately. The way I fixed it is by seeting the crossAxisAlignment on the row to .stretch
Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children:[ /* Buttons Here */]
)