I have a situation where there are two text items in a row. The first text can have a variable length, but I don't want to wrap the texts in two lines. So I need the first text to be clipped when the parent does not have enough width for it and the second text. Now, if I do not place the texts in a row, it works as expected. But if they are in a Row, the clipping does not occur. I can not wrap the first text in an Expanded widget (which fixes the clipping problem) because it adds a blank space between the two texts.
Here is a code snippet
Container(
child: Row (
children: <Widget>[
Text("Long text that needs to be clipped",
overflow: TextOverflow.clip,
textAlign: TextAlign.left),
//there should be no blank space between the elements
Text( "+1",
textAlign: TextAlign.left,
overflow: TextOverflow.fade),
],
)
)
Been scratching my head for a while...
We can use Expanded as per below:
Material(
child: Container(
color: appColor,
child: Row(
children: <Widget>[
Expanded(
child: Align(
alignment: AlignmentDirectional.centerStart,
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Text(
"Lorem Ipsum is simply dummy text of the printing and typesetting industry.",
softWrap: false,
overflow: TextOverflow.fade,
style: TextStyle(color: Colors.white),
),
),
),
),
IconButton(
icon: Image.asset('assets/images/filter.png'),
onPressed: () {},
),
IconButton(
icon: Image.asset('assets/images/notification.png'),
onPressed: () {},
),
],
)),
);
Related
I'm trying to make the Row containing "Short label" wide as the Row below it.
Putting mainAxisSize: MainAxisSize.max isn't enought, since it should match parent width, based on this answer:
The equivalent of wrap_content and match_parent in flutter?
Tried using Expanded outside row, but it causes an error, same using SizedBox.expand.
Can't use constraints like width: double.infinity because the row on the left (// Left part in code) must take only the space it needs, the rest must be taken from the yellow container.
Screenshot and code below:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(
children: [
// Left part
Row(
children: [
Column(children: [
// Error using Expanded ...
//Expanded(
//child:
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Short label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
//),
Row(
mainAxisAlignment: MainAxisAlignment.end,
mainAxisSize: MainAxisSize.max,
children: [
Text('Long text label:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
),
],
),
),
),
);
}
EDIT (old, check final edit below)
IntrinsicWidth was the correct way to give the rows the same width, as #mohandes suggests.
But it does not work if i add another row below (the one containing the checkbox in the image below), wrapping the rows inside two IntrinsicWidth widgets.
The checkbox row should be wide as the upper one in order to align the checkbox on the left.
In the first row i added an orange container on the right as a placeholder for a similar block.
Screenshot and code below:
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Column(
children: [
Row(children: [
Column(
children: [
IntrinsicWidth(
child: Row(children: [
IntrinsicWidth(
child: Column(children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 1:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Text('Short label 123456:'),
Container(width: 20, height: 20, color: Colors.red),
],
),
]),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
width: 40,
height: 40,
color: Colors.orange,
),
)
]),
),
IntrinsicWidth(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Checkbox(value: true, onChanged: null),
Text('Checkbox'),
],
),
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
]),
],
),
),
),
);
}
EDIT 2
IntrinsicWidth works fine, the problem with the code above in the first Edit is that i used IntrinsicWidth as wrapper for child widgets (the rows) instead of parent widget (the outer column).
Try adding the column that contains rows (long and short) in intrinsic width widget .
Intrinsic width make all children width as longest child width.
By changing the layout to Row [ Column Column Container ] we get
Code:
Widget alternateLayout() {
return Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
color: Colors.blue[100],
child: Text('Short label:'),
),
Container(
color: Colors.green[100],
child: Text('Long text label:'),
),
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 20,
width: 20,
color: Colors.red,
),
Container(
height: 20,
width: 20,
color: Colors.red,
),
],
),
Expanded(
child: Container(
color: Colors.yellow,
height: 100,
),
),
],
);
}
I have a text which is basically a title in a box and I want to provide a background color to the space behind that text .
Padding(
padding: EdgeInsets.all(15.0),
child: Text(
'Your Profile',
style: TextStyle(
color: Colors.blue,
fontSize: 26.0,
background: Paint()..color = Colors.blue,
),
This is what I tried but it seems not working.
Expected:Here
"Your profile" text has a background color, I need to achieve this.
You can wrap it with a Container() but, most probably you have to define the width with something like double.maxFinite
Check this
Container(
width: double.maxFinite,
color: Colors.red, //define the background color
child: Text("My Text"),
)
Short answer:
Text(
"Hello World",
style: TextStyle(backgroundColor: Colors.blue), // give any color here
)
Full answer
You can use this in your showDialog call, Here is the full widget you were looking for.
Dialog(
elevation: 12,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Container(
color: Colors.blue[800],
width: double.maxFinite,
alignment: Alignment.center,
padding: EdgeInsets.symmetric(vertical: 16),
child: Text(
"Your Profile...",
style: TextStyle(fontSize: 20, color: Colors.white),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 32),
child: Column(
children: <Widget>[
SizedBox(height: 12),
TextField(decoration: InputDecoration(hintText: "Select a Photo")),
TextField(decoration: InputDecoration(hintText: "Take a Photo...")),
TextField(decoration: InputDecoration(hintText: "Choose form Library")),
],
),
),
Container(
padding: EdgeInsets.symmetric(vertical: 12),
child: RaisedButton(
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(50)),
child: Text("Back"),
onPressed: () {},
color: Colors.red,
textColor: Colors.white,
),
)
],
),
I agree with Saeb Nabil's answer, the easiest way is to use a container. That way you can also control the padding around the text. You can also use .withOpacity() to add transparency if you wish:
Container(
width: 100,
padding: EdgeInsets.symmetric(horizontal: 0, vertical: 10),
color: Colors.grey[900].withOpacity(0.6),
child: Text(
"Hello world!",
style: TextStyle(
fontSize: 14,
color: Colors.white),
), // Text
), // Container
I am new to Flutter and am trying to create a row/column layout that has container areas that I can then populate with specialized widgets but I am struggling to get the appropriate layout.
I have manually hard-coded widths into the columns and containers but I would like to divide the layout into 1/3 2/3 with some padding around the columns
body: Row(crossAxisAlignment: CrossAxisAlignment.stretch, children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.only(bottom:8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(height: 20.0, width:100, color: Colors.yellow),
Container(height: 220.0, width:100,color: Colors.green),
],
),
),
Container(height: 200.0,width:100, color: Colors.cyan),
]),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Container(width:600,color: Colors.amber),
),
]),
This produces a layout but it's hard coded, I would like to use a percentage of the current device's screen width.
Row and column take the size of their parent if there ain't one then they take the size of the content.
For this you can put a Container in front of row and specify the size of it.
Somewhat Like this
Container(width: MediaQuery.of(context).size.width * 0.75,
child:Row(
0.75 is for 75%
I want to build a UI where I have some fixed widgets (visible on all tabs) on top of my screen and then below them I want a TabBarView (with the tab bar at the bottom), is this possible without making your own tab widget or does the TabBarView have to take the whole screen?
Think I found the answer here:
https://camposha.info/course/flutter-widgets/lesson/flutter-nested-tabbar/
This is how I did it:
return Scaffold(
body: Stack(
children: [
Container(
alignment: Alignment.topCenter,
child: Image.asset('assets/images/logo.png',
fit: BoxFit.fitWidth, width: Get.width / 2.5)),
Align(
alignment: Alignment.bottomCenter,
child: DraggableScrollableSheet(
initialChildSize: 0.7,
minChildSize: 0.7,
builder:
(BuildContext context, ScrollController scrollController) =>
SingleChildScrollView(
controller: scrollController,
child: DefaultTabController(
initialIndex: 0,
length: 2,
child: Column(
children: [
TabBar(tabs: <Widget>[
Tab(child: Text('Text1')),
Tab(child: Text('Text2'))
]),
Container(
height: MediaQuery.of(context).size.height,
child: TabBarView(
children: <Widget>[Widget1(), Widget2()],
),
)
],
)),
),
),
),
],
));
I am not able to separate two items with space so that first item appears at the start of row and second at the end of it.
Container(
margin: EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
InkWell(
child: Text("Select your service",
style: profileValueTextStyle),
onTap: () {
print("-----" + result);
}),
Icon(Icons.close)
],
),),
I want to separate the text and close icon.
You should wrap your InkWell into a Expanded Widget:
Container(
margin: EdgeInsets.all(12.0),
child: Row(
crossAxisAlignment:
CrossAxisAlignment.end,
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Expanded( //Here's the widget you need
InkWell(
child: Text("Select your service",
style: profileValueTextStyle),
onTap: () {
print("-----" + result);
}),
),
Icon(Icons.close)
],
),),
It's gonna "push" the Icon to the end of the row.
Hope it's helps !!