Related
I want to align the text "2022" on the bottom of the screen while keeping the image and its neighbor text at the center of the screen.
class SplashScreen extends StatelessWidget {
const SplashScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Globalcolors.mainColor,
body: Container(
padding: const EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Center(
child: Image.asset(
'assets/images/splash_logo.png',
color: Colors.white,
),
),
const Padding(
padding: EdgeInsets.all(50),
child: Text(
'Sample Text',
style: TextStyle(
color: Colors.white,
fontSize: 36,
fontFamily: 'MouseMemoirs'),
),
),
const Text(
'2022',
style: TextStyle(color: Colors.white, fontSize: 12),
),
],
),
),
);
}
}
I tried to use this link to solve the problem. I used Expanded:
const Expanded(
child: Align(
alignment: FractionalOffset.bottomCenter,
child: Text(
'2022',
style: TextStyle(color: Colors.white, fontSize: 12),
),
),
)
But, The result is not good:
You can user Stack and column widgets like
Stack(
children: [
Column(), // contains the image and title
Align(
alignment: Alignment.bottomCenter,
child: Text("2022"),
),
]
)
You can also use Positioned widget to align the text 2022
you can use the bottom method that comes with the scaffold
Scaffold(
bottom : Text("2020")
)
this will make the text always on the bottom of the screen
Hi All I am learning flutter and I want the text to be align-center inside the column but the property crossAlignmentCenter is not working can anyone look and told what i am doing wrong here
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Padding(
padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Text("Log In", style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),),
)
],
),
),
backgroundColor: Colors.teal,
);
}
}```
You need to wrap the Column widget with a SizedBox or a Container with the width of double.infinity. This allows Column to extend as much as the parent allows.
Replace Padding widget with this,
Container(
width: double.infinity,
padding: const EdgeInsets.only(left: 32, right: 32, top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"Log In",
style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),
)
],
),
),
The reason is that by default columns do not take all available space on the cross axis. So in your example, the column is only as thick as the child it holds. Therefore centering it does not change anything. If you are looking for a solution go to Why CrossAxisAligment not Working in Flex,Row and Column?
If you are expecting to make it the vertical center of the column add mainAxisAlignment for your column widget.
mainAxisAlignment: MainAxisAlignment.center,
If want to have it horizontal center replace your column widget to row and make sure to set mainAxisAlignment and crossAxisAlignnment to center
you can wrap your Text widget inside an Align widget to do this. this is your fixed code:
import 'package:flutter/cupertino.dart';
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("hello"),
),
body: Padding(
padding: const EdgeInsets.only(left: 32,right: 32,top: 32),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Align(
alignment: Alignment.center,
child:Text("Log In", style: TextStyle(
fontSize: 30,
fontWeight: FontWeight.w400,
color: Colors.black,
),)
) ,
)
],
),
),
backgroundColor: Colors.teal,
);
}
}
Please help me with this error in the flutter app. I did not know what i am during wrong this is my code below: This is the code below.Pls help me
import 'package:flutter/material.dart';
class CartProducts extends StatefulWidget {
#override
_CartProductsState createState() => _CartProductsState();
}
class _CartProductsState extends State<CartProducts> {
var productsOnTheCart=[
{
"name":"Blazer",
"picture":"images/products/blazer1.jpeg",
"price":85,
"size":"M",
"color":"Black",
"quantity":1,
},
{
"name":"M Pant",
"picture":"images/products/pants2.jpeg",
"price": 80,
"size":"8",
"color":"Black",
"quantity":1,
},
{
"name":"Red Dress",
"picture":"images/products/dress1.jpeg",
"price":50,
"size":"7",
"color":"Red",
"quantity":2,
}
];
#override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: productsOnTheCart.length,
itemBuilder: (context, index){
return new SingleCartProduct(
cartProdName:productsOnTheCart[index]['name'],
cartProdColor:productsOnTheCart[index]['color'],
cartProdQty:productsOnTheCart[index]['quantity'],
cartProdSize:productsOnTheCart[index]['size'],
cartProdPrice:productsOnTheCart[index]['price'],
cartProdPicture:productsOnTheCart[index]['picture'],
);
}
);
}
}
class SingleCartProduct extends StatelessWidget {
final cartProdName;
final cartProdPicture;
final cartProdPrice;
final cartProdSize;
final cartProdColor;
final cartProdQty;
SingleCartProduct({
this.cartProdName,
this.cartProdPicture,
this.cartProdPrice,
this.cartProdSize,
this.cartProdColor,
this.cartProdQty});
#override
Widget build(BuildContext context) {
return Card(
child: ListTile(
//leading section image section here
leading: new Image.asset(cartProdPicture, height:80.0,width: 80.0,),
//title section here
title: new Text(cartProdName),
//subtitle section
subtitle: new Column(
children: <Widget>[
//Row Inside Column
new Row(
children: <Widget>[
//this section is for the size of the products
new Padding(padding:const EdgeInsets.all(4.0),
child: new Text("Size:"),
),
new Padding(padding: const EdgeInsets.all(4.0),
child: new Text(cartProdSize, style: TextStyle(color: Colors.red),),
),
//This Section is for Prodcut Color
new Padding(padding:const EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
child: new Text("Color:"),),
new Padding(padding:const EdgeInsets.all(4.0),
child: new Text(cartProdColor, style: TextStyle(color: Colors.red),),
),
],
),
new Container(
alignment: Alignment.topLeft,
child: new Text("\$${cartProdPrice}",
style: TextStyle(
fontSize: 17.0, fontWeight: FontWeight.bold, color: Colors.red
),
),
)
//This Section is for the product price
],
),
/* trailing:new Column(
children: <Widget>[
new IconButton(
icon: Icon(
Icons.arrow_drop_up,color: Colors.red),
iconSize: 38,onPressed: () {}),
new IconButton(
icon: Icon(
Icons.arrow_drop_down,color: Colors.red,),
iconSize: 38, onPressed: () {}),
],
)*/
trailing: FittedBox(
fit: BoxFit.fill,
child: Column(
children: <Widget>[
new IconButton(icon: Icon(Icons.arrow_drop_up), onPressed: (){}),
new Text("$cartProdQty", style: TextStyle(fontWeight: FontWeight.bold),),
new IconButton(icon: Icon(Icons.arrow_drop_down), onPressed: (){}),
],
),
),
),
);
}
}
If I remember currectly, applying shrinkWrap: true in the ListView.Builder
is supposed to force the views to fit inside it.
My guess is that the views inside the listview cause the overflow..
Edit:
The overflow could be caused by the column widget inside the single cart widget.
Maybe switching it to a Listview.builder instead may help?
I am guessing overflow is happening in the row widget.
Here is a fix. Use Flexible widget or Expanded Widget based on the requirement
Padding(
padding: const EdgeInsets.symmetric(horizontal: 22.0, vertical: 8.0),
child: Row(
children: <Widget>[
Flexible(
fit: FlexFit.loose, // It means that the child widget can expand to maximum size available thus taking up all space else it can shrink if there is no space available // Refer to the link for more info
child: Text(
'This is my first label:',
style: Theme.of(context).textTheme.subtitle,
),
),
SizedBox(width: 5,), // You can simply put some sized boxes like this to have some fixed space instead of wrapping every child in a padding widget
Flexible(
fit: FlexFit.loose,
child: Text(
'This is my first value',
style: Theme.of(context).textTheme.body1,
),
),
Flexible(
fit: FlexFit.loose,
child: Text(
'This is my second label:',
style: Theme.of(context).textTheme.subtitle,
),
),
SizedBox(width: 5,),
Flexible(
fit: FlexFit.loose,
child: Text(
'This is my second value',
style: Theme.of(context).textTheme.body1,
),
),
],
),
),
Okay so here is the result.
See how texts take multiple lines when enough space is not available. You can avoid overflow in smaller screens this way.
Hope this solves your problem :D
In HTML creating a page that is divided into 2 columns that span 100% of the screen height is easy
<div id="row">
<div id="column1" style="width:75%; height:100%"></div>
<div id="column2" style="width:25%; height:100%"></div>
</div>
Using Flutter this seems more complicated than it should be, i tried to achieve the above in a couple of ways: (The page's outline is CustomScrollView -> SliverToBoxAdapter -> Row -> Columns)
Using MediaQuery to set the columns' height as deviceSize.height. This failed because as the left column got bigger than the right column, the right column did not expand in size to match.
Using Expanded or Flexible (tight or loose) to try and expand the height. This did not work.
My question is how do i achieve 100% height and not 100vh height in Flutter web?
Edit:
This illustrates the problem, the right column is not expanding in size to match the left column.
CustomScrollView(
slivers: <Widget>[
SliverFillRemaining(
child: Container(
color: Colors.purple,
child: SingleChildScrollView(
child: Row(
children: <Widget>[
Container(
color: Colors.blue,
child: Column(
children: <Widget>[
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
Text("test"),
SizedBox(height: 300),
],
),
),
Container(
color: Colors.yellow,
child: Column(
children: <Widget>[Text("test")],
),
),
],
),
),
),
),
],
);
Not sure if this is what you want. But based on your statement I think you are looking for two column layout as in here and as shown below in the image.
Following is the code for the same. You can adjust the flex value in the Expanded widget to acquire the required screen width ratio. but if you want to adjust the width each columns like using a drag handle or so, then this alone wont suffice.
import 'package:flutter/material.dart';
class FullHeightDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Row(
children: <Widget>[
Expanded(
flex: 4,
child: Container(
color: Colors.red,
child: Center(
child: Text(
'Column-1',
style:
TextStyle(fontWeight: FontWeight.bold, color: Colors.black),
),
),
),
),
Expanded(
flex: 1,
child: Container(
child: Container(
color: Colors.teal,
child: Center(
child: Text(
'Column-2',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
),
),
)
],
));
}
}
Specifying the height using MediaQuery inside a Scrollable widget could help
Following code places the columns inside a SingleChildScrollableView widget and specifies the height of the container based on MediaQuery to achieve the same. Will this help.? The LayoutBuilder is only there to show that the using the height from its constraints could also lead to error since in this case its height is also infinite.
import 'package:flutter/material.dart';
class FullHeightDemo extends StatelessWidget {
#override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: LayoutBuilder(
builder: (context, constraints) {
var size = MediaQuery.of(context).size;
return Container(
child: Row(
children: <Widget>[
Container(
height: size.height,
// height: constraints.maxHeight,
width: constraints.maxWidth / 2,
color: Colors.red,
child: Center(
child: Text(
'Column 1',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
),
),
Container(
color: Colors.green,
height: size.height,
// height: constraints.maxHeight,
width: constraints.maxWidth / 2,
child: Center(
child: Text(
'Column 2',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
),
),
)
],
),
);
},
),
);
}
}
What I want to achieve is to have a text widget inside a Column of fixed height. When the text is long I want the overflow property which is set to TextOverflow.ellipsis to kick in. The Text widget has its maxLines property set to a high value to allow it to wrap down. But there are other widgets in the column too, both before and after the text widget. The text widget is in an Expanded widget so that it takes up as much room in the column. Full code is pasted below.
The problem with this setup is that the text is overflowing its container parent. I have a border decoration on the container that shows this happening. Why is this happening and how do I fix it.
import 'package:flutter/material.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Overflow"),
),
body: Center(
child: Container(
width: 200.0,
height: 250.0,
child: Card(
child: Column(children: <Widget>[
Image.asset(
"assets/bereket.jpg",
width: double.infinity,
fit: BoxFit.cover,
),
Expanded(
child: Container(
padding: EdgeInsets.all(8.0),
child: (Column(
children: [
Text(
"በረከት ስምኦን፡ «ወይዘሮ አና ጎሜዝ፤ እርስዎ አያገባዎትም! አርፈው ይቀመጡ በልልኝ»",
maxLines: 2,
style: Theme.of(context)
.primaryTextTheme
.subhead
.copyWith(
color: Colors.black,
),
overflow: TextOverflow.ellipsis),
Expanded(
child: Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.green, width: 2.0),
),
child: Text(
"""ባለፉት ሁለት አስርት ዓመታት በኢትዮጵያ ፖለቲካ ከፍተኛ ተጽእኖ ፈጣሪ የነበሩት አቶ በረከት ስምኦን በቅርቡ ከብአዴን ማእከላዊ ኮሚቴ አባልነት መታገዳቸው ይታወሳል።
አቶ በርከት የብአዴን ውሳኔን በተመለከተ እና የወደፊት የፖለቲካ ህይወታቸው ምን ሊሆን እንደሚችል ለቢቢሲ አጋርተዋል።""",
maxLines: 10,
style: Theme.of(context)
.primaryTextTheme
.caption
.copyWith(color: Colors.black),
overflow: TextOverflow.ellipsis,
))),
Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: 20.0,
height: 20.0,
child: Image.asset("assets/bbc.png"),
),
SizedBox(width: 8.0),
Text('ቢቢሲ - ከሁለት ሰአት በፊት',
style: Theme.of(context)
.textTheme
.caption
.copyWith(fontSize: 10.0))
],
)
],
))))
]))),
),
),
);
}
}
Try wrapping your column with 'Flexible' instead of expandable.
I had the same issue with text overflowing in column and wrapping column itself with 'flexible' allowed to make text smaller.
Flexible(
child: Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Text(
'Name',
style: CustomTextStyle.blueTitle14(context),
),
),
Padding(
padding: const EdgeInsets.only(bottom: 4.0),
child: Text('Long text'),
),
],
),
),
),
Based on my experiences, you should assign a fixed width to the Container containing the overflowing text, as per this post. Flutter- wrapping text .
In present version of flutter (presently 3.0) you dont have to use Flexible or Expanded as Column's child automatically expandes to fill the content of child .
For ellipses define the maxLine attribute.
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: const [
Text(
"This is very very very very very very very very very very very very very very very very very long text in Row 1 of Column",
maxLines: 2,
style: TextStyle(
backgroundColor: Colors.green, overflow: TextOverflow.ellipsis),
),
Text("This is very very long text in Row 2 of Column",
style: TextStyle(
overflow: TextOverflow.ellipsis,
backgroundColor: Colors.yellow))
],
)