"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"),
],
),
),
);
}
}
Related
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),))
],
),
),
],
),
);
}
}
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,),
),
I want overlay a widget over the bottom widget to hide it. hence I use stack. I don't know the bottom widget size so I can't give top widget fixed size.
what I have:
what I want to achieve:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34)),
Container(
color: Colors.amber,
)
],
),
],
),
This is simplified version of what I want to achive. I have to use Row and assume Texts are any widget with any size.
Stack sizes its children based on the Constraint it receives from parent not based on children sizes.
how can I overlay top widget with exact size of bottom widget?
To know the size of your widget and apply things depending on this, you can use GlobalKey like this GlobalKey key;. Initialize it in your initSate and listen to it's size
GlobalKey key;
double yourWidgetWidth;
double yourWidgetHeight;
#override
initState() {
// .... other stuffs
key = GlobalKey();
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
yourWidgetWidth = containerKey.currentContext.size.width;
yourWidgetHeight = containerKey.currentContext.size.height;
}
});
}
And with yourWidgetWidth and yourWidgetHeight you can achieve what you want
Edit
Here is a concept of what am trying to explain
// In variable declaration scope
GlobalKey youTextKey = GlobalKey();
ValueNotifier widthNotifier = ValueNotifier(0);
ValueNotifier heightNotifier = ValueNotifier(0);
// In initState
WidgetsBinding.instance.addPostFrameCallback((_) {
if (mounted) {
widthNotifier.value = youTextKey.currentContext.size.width - 1.0;
heightNotifier.value = youTextKey.currentContext.size.height - 5.0;
}
});
// Your row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34), key: youTextKey,),
ValueListenableBuilder(
valueListenable: widthNotifier,
builder: (context, width, _) {
return ValueListenableBuilder(
valueListenable: heightNotifier,
builder: (context, height, _) {
return Container(
width: width,
height: height,
color: Colors.amber,
);
},
);
},
),
],
),
],
)
Using Positioned.Fill solved the problem:
Positioned.Fill Creates a Positioned object with [left], [top], [right], and [bottom] set to 0.0 unless a value for them is passed.
so the Positioned child get stretched to the edges of the stack's biggest child.
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
'Winner: ',
style: TextStyle(fontSize: 34),
),
Stack(
children: [
Text('YOU!!!', style: TextStyle(fontSize: 34)),
Positioned.fill(
child: Container(
color: Colors.amber,
),
)
],
),
],
),
In the following code
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
final text = Text(
'When large fortunes fall into the hands of some people, they become strong in the light of it, and in the shadow of strength and wealth they dream that they can live out of their homeland and be happy and proud, they will soon realize that they have made mistakes, and the greatness of every nation On the ruins of his homeland and cease!',
style: Theme.of(context).textTheme.headline4);
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
text,
],
),
],
)
],
);
}
}
I have a Text widget in a Column in Row in another Column , As text is in Row it is single row and overflowed, I want to make it multiline to I wrap it with Flexible
return Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Column(
children: [
Flexible(child: text),
],
),
],
)
],
);
What is wrong here? Why I have RenderFlex children have non-zero flex but incoming height constraints are unbounded. ?
You must wrap column with flexible, not text itself.
Please try this. It's working for me.
Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
children: [
Flexible(child: Column(
children: [
text
],
),)
],
)
],
)
I have an issue with refactoring my code of DropdownButton widget in Flutter. I have simple DropdownButton.
DropdownButton(
items: [
DropdownMenuItem(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Ascending'),
if (widget.currentDateSortOrder == SortOrderType.Ascending)
Icon(Icons.check)
],
),
),
value: 'Asc',
),
DropdownMenuItem(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Descending'),
if (widget.currentDateSortOrder == SortOrderType.Descending)
Icon(Icons.check)
],
),
),
value: 'Desc',
)
],
onChanged: (itemIdentifier) {
...
},
)
I want to move DropdownMenuItem to separate widget to make my widget tree leaner. So I then moved it.
import 'package:flutter/material.dart';
class FileListDropdownMenuItem extends StatelessWidget {
final String labelText;
final bool showSelectedMark;
final String itemValue;
FileListDropdownMenuItem(this.labelText, this.showSelectedMark, this.itemValue);
#override
Widget build(BuildContext context) {
return DropdownMenuItem(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(labelText),
if (showSelectedMark)
Icon(Icons.check)
],
),
),
value: itemValue,
);
}
}
And when I'm trying to use it in DropdownButton like this:
...
items: [
FileListDropdownMenuItem(
'Ascending',
widget.currentDateSortOrder == SortOrderType.Ascending,
'Asc')
],
...
I get this error:
The argument type 'List<FileListDropdownMenuItem>' can't be assigned to the parameter type 'List<DropdownMenuItem<dynamic>>'.
Is there a way to make such approach work? I know that I can leave DropdownMenuItem in DropdownButton and move only 'child' property of it to the separate widget. However then I would have to manage 'value' and other properties of DropdownMenuItem in the main file.
DropdownButton requires its items to be List<DropdownMenuItem>. But your class, FileListDropdownMenuItem, extends just StatelessWidget. If you want to use it as replacement for DropdownMenuItem, you should extend it:
class FileListDropdownMenuItem extends DropdownMenuItem {
FileListDropdownMenuItem(
String labelText,
bool showSelectedMark,
String itemValue,
) : super(
child: Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(labelText),
if (showSelectedMark)
Icon(Icons.check)
],
),
),
value: itemValue,
);
}