I am writing a widget in flutter for a project which should look like this, I am new to flutter and I am trying to imitate the card below
So far this is my code for the widget
import 'package:flutter/material.dart';
import 'package:smooth_star_rating/smooth_star_rating.dart';
class TrailCard extends StatelessWidget {
const TrailCard({Key key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Card(
shape:
RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
child: InkWell(
onTap: () {},
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(20.0),
child: Image.asset(
'assets/images/cocoa.jpg',
height: 100,
width: 90,
fit: BoxFit.fitHeight,
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Boring Cocoa",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
Text('Rajhamundry, AP'),
Text(
'Feel the authentic flavours of life while you visit the farms around Rajahmundry',
overflow: TextOverflow.ellipsis,
)
],
),
),
],
)),
)),
);
}
}
I tried using flexible and expanded to try and make the content look the way but I am getting overflow error
You can wrap the Padding widget with a Flexible widget so it takes only the amount of space needed:
NOTE: you should also set the maximum amount of lines the Text widget should take before showing the ellipsis.
Flexible(
// new line
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Boring Cocoa",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
Text('Rajhamundry, AP'),
Text(
'Feel the authentic flavours of life while you visit the farms around Rajahmundry more text to cause overflow',
// set maximum number of lines the text should take
maxLines: 3, // new line
overflow: TextOverflow.ellipsis,
)
],
),
),
);
RESULT:
Wrap Padding with Expanded
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"Boring Cocoa",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold),
),
Text('Rajhamundry, AP'),
Text(
'Feel the authentic flavours of life while you visit the farms around Rajahmundry',
overflow: TextOverflow.ellipsis,
)
],
),
),
)
Related
I want to print first element in the list "first ques"
but I'm getting different sort of errors tried using final also, then all sort of errors.
class _QuizPageState extends State<QuizPage> {
List<Widget> scoreKeeper = [];
List<String> questions = ["First ques", "seacond ques", "third ques"];
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
"example text"
questions[0], //why its not displaying "first ques"
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
try this
class _QuizPageState extends State<QuizPage> {
List<Widget> scoreKeeper = [];
List<String> questions = ["First ques", "seacond ques", "third ques"];
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
const Expanded(
flex: 5,
child: Padding(
padding: EdgeInsets.all(10.0),
child: Center(
child: Text(
questions[0], //why its not displaying "first ques"
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
the reason you are getting error is that the Text widget takes only one string and you are passing two string to it.
First, you should remove const from the Expanded widget because you're using a variable inside on Text which is questions[0].
And I want to mention that its better to use questions.first for readability proposes and check if the list is empty before it to prevent possible errors.
So Here's the final result:
Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Expanded(
flex: 5,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Center(
child: Text(
questions.first,
//why its not displaying "first ques"
textAlign: TextAlign.center,
style: const TextStyle(
fontSize: 25.0,
color: Colors.white,
),
),
),
),
),
],
),
I am developing a multi language application supports Locale('en') (English) and Locale('ar') (Arabic) , I have a Row() with four children :
Row(
children: [
Flexible(
child: Container(
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.all(10),
child: Text(
"1",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
),
),
Flexible(
child: Container(
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.all(10),
child: Text(
"2",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
),
),
Flexible(
child: Container(
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.all(10),
child: Text(
"3",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
),
),
Flexible(
child: Container(
padding: const EdgeInsets.all(20),
margin: const EdgeInsets.all(10),
child: Text(
"4",
style: TextStyle(color: Colors.white),
),
color: Colors.blue,
),
),
],
)
when the locale is Locale('en') children laid out left to right :
and when the locale is Locale('ar') children laid out right to left :
Problem is I need children in this Row() specifically to be laid left to right regardless the current locale , is there any way to achieve this rather than build different widget based on the current locale ?
if(Localizations.localeOf(context).languageCode == 'en'){
// build some widget
}else{
// build different widget
}
Solved by setting the textDirection property on Row() widget to TextDirection.ltr which determines the order to lay children out horizontally and how to interpret start and end in the horizontal direction.
I am unable to make my text stop extending the screen and overflowing. My code is as follows:
class OrderTileDisplay extends StatelessWidget {
final MenuOrderData orderItem;
final editable;
OrderTileDisplay(this.orderItem, {this.editable = true});
#override
Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
GestureDetector(
onTap: (){},
child: Container(
color: Colors.transparent,
margin: EdgeInsets.symmetric(vertical: 4),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
Text(
orderItem.quantity.toString() + 'x',
style: Title16,
),
SizedBox(
width: 8,
),
Text(
orderItem.name, // OVERFLOWS WHEN IT IS A LONGER SENTENCE
style: Title18bold,
overflow: TextOverflow.ellipsis,
),
],
),
Row(
children: [
editable? Icon(Icons.edit, color: Colors.grey[200], size: 20,) : Container(),
SizedBox(width: 8,),
Text("£" + Provider.of<CP>(context).getTotalForItem(orderItem).toStringAsFixed(2),
style: Title18bold,),
],
),
],
),
),
),
Container(... and other stuff)
I have tried putting Text inside a container then Expanded widget but I keep getting errors. Not sure how to solve it.
Try to wrap your Row and Text inside a Flexible:
Flexible( //flexible here
child: Row(
children: [
Text(
orderItem.quantity.toString() + 'x',
style: Title16,
),
SizedBox(
width: 8,
),
Flexible( //and here
child: Text(
orderItem.name, // no more overflow
style: Title18bold,
overflow: TextOverflow.ellipsis, //working as expected
),
),
],
),
),
As the documentation states, TextOverflow says how overflowing text should be handled, but it will not work if it's parent don't have a fixed size. In this case, Flexible is been used to restrict the total size of the text to prevent overflow, when it reaches a very large width.
I am new to flutter, need to know about a problem I am facing. I have built a web app using flutter. Which contains columns, containers, grid views, and other flutter widgets.
The problem I am facing is, though my layout is responsive when I shrink the chrome browser, it starts shrinking the content. Usually, in sites like Amazon, and other web pages, the shrink browser shows an extra scroll bar horizontally and vertically, and the content size remains the same.
How the same can be done using flutter?
Before
After
Here is the code:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Flexible(
child: DateCard(
eventName: 'Code Freeze', date: DateTime.now())),
SizedBox(width: 5),
Flexible(
child: DateCard(
eventName: 'Switchover', date: DateTime.now())),
SizedBox(width: 5),
Flexible(
child: DateCard(eventName: 'SP GA', date: DateTime.now())),
],
),
class DateCard extends StatelessWidget {
final String eventName;
final DateTime date;
const DateCard({this.eventName, this.date});
#override
Widget build(BuildContext context) {
return Column(
children: [
Material(
shape: SuperellipseShape(
borderRadius: BorderRadius.circular(28),
),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 18, vertical: 3),
child: FittedBox(
fit: BoxFit.contain,
child: Column(
children: [
Text(
date.day.toString(),
// maxLines: 1,
// overflow: TextOverflow.visible,
style: TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 3,
letterSpacing: -1),
),
Text(
DateFormat("MMM").format(date),
// overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: SizeConfig.blockSizeHorizontal * 1.2,
),
),
],
),
),
),
),
SizedBox(height: 5),
Text(
eventName,
textAlign: TextAlign.center,
style: TextStyle(color: Colors.white, fontSize: 14),
)
],
);
}
}
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))
],
)