Flutter TextBaseline in Row and IntrinsicHeight doesn't work - flutter

Is there any way to achieve text baseline with VericalDivider() where the Rows() under the Column() and required IntrinsicHeight() to make the VerticalDiver() render properly.
Meanwhile, look like there is limitation around CrossAxisAlignment.baseline and IntrinsicHeight https://github.com/flutter/flutter/issues/71990#issuecomment-747141796
From the picture below, I can't use CrossAxisAlignment.baseline with IntrinsicHeight Widget so the text that has different size will look something like this. But if I remove IntrinsicHeight the VericalDivider Widget will not render. (Height = 0)
class _MyHomePageState extends State<MyHomePage> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("hey"),
IntrinsicHeight(
child: Row(
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(child: Text("aaaaaxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx")),
VerticalDivider(
width: 50,
thickness: 50,
),
Expanded(child: Text("bbbbbb", style: TextStyle(fontSize: 30),))
],
),
),
],
),
);
}
}

Related

How to wrap a list of widgets with Flexible

I have a StatelessWidget defined as:
class FlexElement extends StatelessWidget {
final List<Widget> widgets;
final bool isVisible;
const FlexElement({
Key? key,
required this.widgets,
required this.isVisible,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Visibility(
visible: isVisible,
child: Container(
child: Row(
children: <Widget>[...widgets],
),
),
);
}
}
I would like to wrap each widget with a Flexible, so it doesn't overflow. (Row(children: Flexible([...widgets])). But since it is a list of widgets, I can only assign to multiple children and not to a single child. How would I solve this?
This is the result i would like:
Row(
children: [
Flexible(
child: Widget1(), // <-- Wrapped in Flexible.
),
Flexible(
child: Widget2(), // <-- Wrapped in Flexible.
),
...
],
)
You can do,
children: <Widget>[...widgets.map((w)=>Flexible(child:w))],
Or direct
children:widgets.map((w)=>Flexible(child:w)).toList(),
This is what I always do:
Row(
children: [
Flexible(
flex: 20,
fit: FlexFit.tight,
child: Widget1(), // <-- Wrapped in Flexible.
),
Flexible(
flex: 30,
fit: FlexFit.tight,
child: Widget2(), // <-- Wrapped in Flexible.
),
...
],
)
I put the flex values to total 100 so I think of each as a percentage of the width of the Row.

Flutter : Why Text Widget on Flutter automatically centered when placed before TextField Widget ? ( Inside Column Widget )

So i tried to make my TextWidget aligned to left but when i put TextWidget above ( before ) TextFieldWidget it's automatically become centered following with the TextFieldWidget, here my code
import 'package:flutter/material.dart';
void main() {
runApp(new MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Center(
child: Text("SQLite Application"),
),
),
body: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Text("Name of Things"),
TextField()
],
),
),
);
}
}
and here is the result :
Code Output
Is there a solve to make the TextWidget to aligned to the left ? I've tried to use TextAlign.left on TextWidget but it wont change.
Use
crossAxisAlignment: CrossAxisAlignment.start,
on the Column
You need to set the mainAxisAlignment to Start
Column(
crossAxisAlignment: CrossAxisAlignment.start
In case you want to place the contents at the Right Side, you can use
Column(
crossAxisAlignment: CrossAxisAlignment.end
just add
Column(
crossAxisAlignment: CrossAxisAlignment.start,
the result
You put your text inside Column widget. Column by default crossAxisAlignment is centre. That's why your text is always on centre.
for example
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children:const [
SizedBox(
height: 20,
),
Text("your text....!"),
TextField()
],
),
And if you wanna align text without Column, use Align with with alignment.topleft. It will move on left side
Align(
alignment: Alignment.topLeft,
child: Text("Name of Things", textAlign: TextAlign.left,),
),

Add scrollable and refreshable data table between fixedWidth widgets

Totally I need a scrollable DataTable with refresh possibility on pull down between header and footer fixed width widgets.
I have a widget, using on every page in my app. THis widget return a Scaffold with appbar and body like column (). This widget used like CommonPage(title, widgetsArrayForBodyColumn) from other widgets.
For now I need to use a follow widgets in that body:
Lookup (for filtering or for example, any fixed height widget)
DataTable (for show data)
Card (to show another data)
DataTable should be scrollable and refreshable on pull down.
I tried many different ways, but still has no success. My last solution is using stack, but list hidden beside the card.
I can't understand how to achieve my goal: have refreshing datatable between non scrollable widgets in a column.
class CommonPage extends StatefulWidget {
final String title;
final List<Widget> children;
const CommonPage({
Key? key,
required this.title,
required this.children,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
...
body: Column(children: [
FixedHeightWidget(),
PageScreen(),
]);
}
}
class PageScreen {
#override
Widget build(BuildContext context) {
return CommonPage(
title: Title,
children: [
FixedHeightWidget(),
PageList(),
],
);
}
}
class PageList {
Widget build(BuildContext context) {
//TODO Return fixedWidthWidget at top, expandedRefreshableScrollableDataTable, fixedWidthWidget at bottom
}
}
My current solution: (almost achieves my goal, but as mentioned card hides part of list and no ways to scroll and check bottom of the list):
return Expanded(
child: Stack(
children: [
RefreshIndicator(
onRefresh: onRefresh,
child: ListView(
children: [
listItems.isNotEmpty
? DataTable(...)
: Container(),
],
),
),
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
alignment: Alignment.bottomCenter,
child: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Card(...),
),
),
),
],
),
],
),
);
I found the solution:
return Expanded(
child: Column(
children: [
Expanded(
child: RefreshIndicator(
onRefresh: onRefresh,
child: ListView(
children: [listItems.isNotEmpty
? DataTable(...)
: Container(),
],
),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 5),
child: Card(...),
),
],
),
);

"How to create two text widgets in a row widget"

"I'm a beginner in flutter, I want to display two text in row .where "hello" is the first text widget and "world" is another text widget
I tried doing this with my basic knowledge but I came across these errors
Horizontal RenderFlex with multiple children has a null textDirection, so the layout order is undefined.
'package:flutter/src/rendering/flex.dart':
Failed assertion: line 439 pos 18: 'textDirection != null'
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Row(
children: <Widget>[
Text("hello",textDirection: TextDirection.rtl,),
Text("world",textDirection: TextDirection.rtl,)
],
);
}
}
Maybe you want to use RichText instead?
RichText(
text: TextSpan(
children: <TextSpan>[
TextSpan(text: 'hello', style: TextStyle(color: Colors.red)),
TextSpan(text: ' world', style: TextStyle(color: Colors.blue)),
],
),
)
Please read this link about Row in Flutter:
https://medium.com/jlouage/flutter-row-column-cheat-sheet-78c38d242041
In a nutshell, you Declare a Row and the items that will be inside that row are the children (Which must be widgets).
I picked an example from here
https://flutter.dev/docs/development/ui/layout
something like this
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image.asset('images/pic1.jpg'),
Image.asset('images/pic2.jpg'),
Image.asset('images/pic3.jpg'),
],
);
In Your case, you just have to erase the image.asset and change it for texts...
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Hello'),
Text('World'),
],
);
or whatever you want.
Please try below code:-
#override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text("Hello",style: TextStyle(color: Colors.blue)),
Text("World",style: TextStyle(color: Colors.blue))
],
);
}
**Try This Simplest Way**
import 'package:flutter/material.dart';
class Example extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Row(
children: <Widget>[
Text("Hello"),
Text("World"),
],
),
),
);
}
}

Flutter : Vertically center column

How to vertically center a column in Flutter? I have used widget "new Center". I have used widget "new Center", but it does not vertically center my column ? Any ideas would be helpful....
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Thank you"),
),
body: new Center(
child: new Column(
children: <Widget>[
new Padding(
padding: new EdgeInsets.all(25.0),
child: new AnimatedBuilder(
animation: animationController,
child: new Container(
height: 175.0,
width: 175.0,
child: new Image.asset('assets/angry_face.png'),
),
builder: (BuildContext context, Widget _widget) {
return new Transform.rotate(
angle: animationController.value * 6.3,
child: _widget,
);
},
),
),
new Text('We are glad we could serve you...', style: new TextStyle(
fontSize: 16.0,
fontWeight: FontWeight.w600,
color: Colors.black87),),
new Padding(padding: new EdgeInsets.symmetric(vertical: 5.0, horizontal: 0.0)),
new Text('We appreciate your feedback ! !', style: new TextStyle(
fontSize: 13.0,
fontWeight: FontWeight.w200,
color: Colors.black87),),
],
),
),
);
}
Solution as proposed by Aziz would be:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
//your widgets here...
],
)
It would not be in the exact center because of padding:
padding: EdgeInsets.all(25.0),
To make exactly center Column - at least in this case - you would need to remove padding.
Try:
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children:children...)
Try this one. It centers vertically and horizontally.
Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
)
With Column, use:
mainAxisAlignment: MainAxisAlignment.center
It align its children(s) to center of its parent Space vertically
You control how a row or column aligns its children using the mainAxisAlignment and crossAxisAlignment properties. For a row, the main axis runs horizontally and the cross axis runs vertically. For a column, the main axis runs vertically and the cross axis runs horizontally.
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
While using Column, use this inside the column widget :
mainAxisAlignment: MainAxisAlignment.center
It align its children(s) to the center of its parent Space is its main axis i.e. vertically
or,
wrap the column with a Center widget:
Center(
child: Column(
children: <ListOfWidgets>,
),
)
if it doesn't resolve the issue wrap the parent container with a Expanded widget..
Expanded(
child:Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: children,
),
),
)
Another Solution!
If you want to set widgets in center vertical form, you can use ListView for it.
for eg: I used three buttons and add them inside ListView which followed by
shrinkWrap: true -> With this ListView only occupies the space which needed.
import 'package:flutter/material.dart';
class List extends StatelessWidget {
#override
Widget build(BuildContext context) {
final button1 =
new RaisedButton(child: new Text("Button1"), onPressed: () {});
final button2 =
new RaisedButton(child: new Text("Button2"), onPressed: () {});
final button3 =
new RaisedButton(child: new Text("Button3"), onPressed: () {});
final body = new Center(
child: ListView(
shrinkWrap: true,
children: <Widget>[button1, button2, button3],
),
);
return new Scaffold(
appBar: new AppBar(
title: Text("Sample"),
),
body: body);
}
}
void main() {
runApp(new MaterialApp(
home: List(),
));
}
Output:
CrossAlignment.center is using the Width of the 'Child Widget' to center itself and hence gets rendered at the start of the page.
When the Column is centered within the page body's 'Center Container' , the CrossAlignment.center uses page body's 'Center' as reference and renders the widget at the center of the page
Code
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(
title:"DynamicWidgetApp",
home:DynamicWidgetApp(),
));
class DynamicWidgetApp extends StatefulWidget{
#override
DynamicWidgetAppState createState() => DynamicWidgetAppState();
}
class DynamicWidgetAppState extends State<DynamicWidgetApp>{
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
//Removing body:Center will change the reference
// and render the widget at the start of the page
child: Column(
mainAxisAlignment : MainAxisAlignment.center,
crossAxisAlignment : CrossAxisAlignment.center,
children: [
Text("My Centered Widget"),
]
),
),
floatingActionButton: FloatingActionButton(
// onPressed: ,
child : Icon(Icons.add),
),
);
}
}
For me the problem was there was was Expanded inside the column which I had to remove and it worked.
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Expanded( // remove this
flex: 2,
child: Text("content here"),
),
],
)
You could use.
mainAxisAlignment:MainAxisAlignment.center
This will the material through the center in the column wise.
`crossAxisAlignment: CrossAxisAlignment.center'
This will align the items in the center in the row wise.
Container( alignment:Alignment.center, Child: Column () )
Simply use.
Center ( Child: Column () )
or rap with Padding widget . And adjust the Padding such the the column children are in the center.
You can also wrap the Column widget by Align.
Align(
alignment: Alignment.center,
child: Column(
children: [
Container(
width: 300,
margin: const EdgeInsets.fromLTRB(0, 70, 0, 0),
child: TextFormField(decoration: const InputDecoration(hintText: "First Name"))
),
...
]
)
)
Checkout this website for different ways of centering a widget: Link
In Addition, If you used
mainAxisAlignment: MainAxisAlignment.start
for centering all children but you still one of the children to be centered , Simply use Center() widget on the children.