Related
I am facing this issue while reading data from my real time data base but. I am storing the check in time in a list and check out time in another list but while scrolling i want to scroll them together to see the particular check in and check out time beside each other.
here is my code
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// ignore: prefer_const_literals_to_create_immutables
children: [
SizedBox(
height: 40,
),
Text(
// textAlign: TextAlign.center,
"Check In Time",
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
Expanded(
child: FirebaseAnimatedList(
query: ref,
itemBuilder:
(context, snapshot, animation, index) {
return ListTile(
leading: const Icon(Icons.flutter_dash_sharp),
title: Text(
textAlign: TextAlign.center,
snapshot.child('time').value.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
color: Colors.white,
),
),
);
},
),
),
],
),
),
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
// ignore: prefer_const_literals_to_create_immutables
children: [
// ignore: prefer_const_constructors
SizedBox(
height: 40,
),
Text(
"Check Out Time",
style: GoogleFonts.ubuntu(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.white70,
),
),
Expanded(
child: FirebaseAnimatedList(
query: ref2,
itemBuilder:
(context, snapshot, animation, index) {
return ListTile(
title: Text(
textAlign: TextAlign.center,
snapshot.child('time').value.toString(),
style: GoogleFonts.ubuntu(
fontSize: 16,
color: Colors.white,
),
),
);
},
),
),
],
),
)
],
),
),
),
please help me to marge this animated list together.
I have tried to marge the list tile and animated list both separately but did't work. Is there any problem related with real time database as i am storing the check in and check out in separate list in the database.
I have this issue with my Flutter UI. I'm trying to make my text break when it's too long, but the overflow ellipsis doesn't work. Can you help me please?
issue picture:
this is what i'm looking for:
My code:
static Drawer myDrawer (BuildContext context, String mode, String businessName) {
return Drawer(
child: Container(
child: ListView(
padding: EdgeInsets.only(top:0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: CustomPaint(
painter: DrawerHeaderPaint(),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40,
image: AssetImage('assets/logo.png')
),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25
),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
],
),
)
],
),
],
),
),
),
SizedBox(height: 40),
menuOptions(),
],
)
],
),
)
);
}
Try wrapping Business Info Column with Expanded widget and also wrap Text widget after apartment icon with Expanded widget, like so:
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25,
), //TextStyle
), //Text
Container(
color: Colors.red,
child: Row(
children: const [
Icon(Icons.apartment, color: Color(0xff263d67)),
Expanded(
child: Text(
'Business Name tooooo loooooong',
overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
), //TextStyle
), //Text
), //Expanded
],
), //Row
), //Container
],
), //Column
), //Expand
Use a Expanded or Flexible
Expanded(
child:
Text('Business Name tooooo loooooong',...))
//you can use the SizedBox widget and specify your text width it helps to ellipsis the text. Hope this code will help you.Thanks
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class Dermo extends StatefulWidget {
const Dermo({Key? key}) : super(key: key);
#override
_DermoState createState() => _DermoState();
}
class _DermoState extends State<Dermo> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.red,
)
,
drawer: Drawer(
backgroundColor: Colors.green,
child: Container(
child: ListView(
padding: EdgeInsets.only(top: 0),
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.17,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
SizedBox(width: 25),
CircleAvatar(
backgroundColor: Colors.white,
radius: 30,
child: Image(
height: 40, image: AssetImage('assets/logo.png')),
),
SizedBox(width: 10),
Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'My Companny',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.w900,
fontSize: 25),
),
Container(
color: Colors.red,
child: Row(
children: [
Icon(Icons.apartment, color: Color(0xff263d67)),
///if you want to show complete text use can comment
///out overflow,softWrap and maxLines otherwise you can use all
///these properties it ellipsis the text
SizedBox(
width: 160,
child: Text(
'Business Name tooooo loooooong',
/* overflow: TextOverflow.ellipsis,
maxLines: 1,
softWrap: false,*/
style: TextStyle(
fontFamily: 'Poppins',
color: Color(0xffd7d7d7),
fontWeight: FontWeight.w700,
fontSize: 16,
),
),
),
],
),
)
],
),
],
),
),
SizedBox(height: 40),
],
)
],
),
)));
}
}
i would like to have a circle in which i can put centered text using ListTile widget? what i done is below :
ListTile(
leading: new CircleAvatar(
backgroundColor: color2,
child: new Text(
letter,
style: TextStyle(
color: color,
fontSize: 17.0,
fontWeight: FontWeight.bold,
),
)),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style:
TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
),
and the result :
as you can see, the string is not centered vertically and i would like the do that conserving the same design. i precise, the arrow inside the circle is not an icon, but a string type variable.
You can use a container with Circle shape, and inside that, please center the text like below code:
Container(
width: 60,
height: 60,
child: Center(child: Text("Your text"),
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Color(0xFFe0f2f1)),
)
I have edited you code so please try this and let me know.
ListTile(
leading: Container(
height: 50,
width: 50,
decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.blue),
child: Center(
child: Text(
'Text',
style: TextStyle(fontSize: 17),
),
),
),
title: Text(
text,
style: TextStyle(fontSize: 15),
),
subtitle: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 2.0),
Text(
subtext,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
Text(
date,
style: TextStyle(
fontSize: 12.0,
),
),
SizedBox(height: 2.0),
],
),
trailing: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
new Text(
amount,
style: TextStyle(fontSize: 13.0, fontWeight: FontWeight.bold),
),
SizedBox(height: 5.0),
],
),
),
);
I hope it's work
I'm new to flutter and currently practicing the layout options. I need help with layout from the image below, I used a Row that has 2 children, 2 Columns with 4 Text Widgets. The first column has the text PASSENGER, CONTACT, ETC. and the second columns contains 4 other Text Widgets Jessica Hyde, Numbers and Luggage (I've nested '3 big suitcases and 1 carry on' Text in a Column and in a Row the Text 'French speaker, smoker').
The problem I have is that they are not aligned like in the picture, PASSENGER with the name, CONTACT with the number and etc. My results look like this:
Row(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'PASSENGER',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
// SizedBox(
// height: 10.0,
// ),
Text(
'CONTACT',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
SizedBox(
height: 10.0,
),
Text(
'LUGGAGE',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
SizedBox(
height: 20.0,
),
Text(
'OTHER',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w500,
color: Colors.grey[600],
),
),
],
),
),
Padding(
padding: const EdgeInsets.only(
left: 12.0,
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Wade Wilson',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
Text(
'+1 212+759-3000',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
SizedBox(
height: 10.0,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'3 big suitcases',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
SizedBox(
height: 2.0,
),
Text(
'1 carry on',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
],
),
SizedBox(
height: 10.0,
),
Row(
children: [
Text(
'French speaker, ',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
Text(
'smoker',
style: TextStyle(
fontSize: 15.0,
fontWeight: FontWeight.w600,
color: Colors.grey[500],
),
),
],
),
],
),
),
],
);
What is the best way to fix this?
Thanks in advance for your help!
import 'package:flutter/material.dart';
class something extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
"The Header",
style: TextStyle(
fontSize: 16,
color: Colors.black87,
fontWeight: FontWeight.bold),
),
Padding(padding: EdgeInsets.only(top: 20)),
_forRows(),
_forRows(),
_forRows(),
_forRows(),
],
);
}
}
Widget _forRows() {
return Row(
children: [
Expanded(
child: Text(
"BANANAS1",
style: TextStyle(fontSize: 16, color: Colors.black87),
),
flex: 2,
),
Expanded(
child: Text("bananas2"),
flex: 6,
)
],
);
}
This might solve your problem.
I think you need to pass width to first text. Ty with below line it will help you
return Scaffold(
body: SafeArea(
child: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Passengers Info"),
Container(height: 50,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("PASSENGER"),width: 100,),
Expanded(child: Text("Jessica Hyde")),
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("CONTACT"),width: 100,),
Expanded(child: Text("+ your number")),
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("LUGGAGE"),width: 100,),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("3 big suitcases"),
Text("1 carry on"),
],
)
]
),
Container(height: 5,),
Row(
children: <Widget>[
Container(width: 5,),
Container(child: Text("OTHER"),width: 100,),
Expanded(child: Text("French speaker, smoker")),
]
),
],
)
),
)
);
I've got a piece of code that -- works! So, not asking for debug help.
I'm three days into learning date and mostly positive, but sometimes hard to find working code examples of things i'm trying to do. So, lots of trial and error. My best advice is to set the background color on every widget to something bold (yellow, green, blue) to help troubleshoot design/layout issues.
But, I read a lot about how to implement something like this: retrieve json data from an API, iterate through it to create a dynamic list of widgets using Future<>. My example is pure flutter web at this time.
The problem is - many sites suggested using List Builder also and for the life of me I could not get it to work. It kept overflowing the bottom of the browser and I could not find any way to extend it. I used a "for Model in List" loop and it worked fine.
So, my question is - if i give you working code, can you suggest a better approach/implementation?
Widget build(BuildContext context) {
return FutureBuilder<List<Menurender>>(
future: fetchMenu(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.none &&
snapshot.hasData == null) {
//print('project snapshot data is: ${projectSnap.data}');
return Container();
}
return Container(
width: MediaQuery.of(context).size.width,
//color: Colors.yellow,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: MediaQuery.of(context).size.width * .80,
child: SingleChildScrollView(
child: Column(children: [
for (Menurender menu in snapshot.data)
Column(children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${menu.weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${menu.dayOfMonth} ${menu.monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)),
)),
),
),
],
))
],
)
])
])),
),
],
),
);
});
}
The actual code working is here so you can see what i'm trying to accomplish:
my test build in progress:
https://flavorboxstorage.z23.web.core.windows.net/#/
actual company wordpress site:
https://www.flavorboxsaigon.com/
Writing a for loop inside your widget tree makes life difficult for Flutter when rebuilding widgets and might affect your performance. You should be able to just use a ListView.builder like this:
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
return Column(
children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${snapshot.data[index].weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'
),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${snapshot.data[index].dayOfMonth} ${snapshot.data[index].monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'
),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)
),
)
),
),
),
],
)
)
],
)
]
);
}
)
if you want to use for loop you can just do it like this
ListView(
children: <Widget>[
for(var x=0; x<snapshot.data.length;x++)
Container(
child: Column(children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${menu.weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${menu.dayOfMonth} ${menu.monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)),
)),
),
),
],
))
)
]
)
if you want ListView.builder
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (context, index){
return Container(
child: Column(children: <Widget>[
Row(
children: <Widget>[
//SizedBox(width: 60),
Text(
'${menu.weekDayFull}',
style: TextStyle(
color: Color(0xff444444),
fontSize: 32,
letterSpacing: 2,
fontWeight: FontWeight.w600,
fontFamily: 'Fira Sans'),
),
],
),
Row(
children: <Widget>[
//SizedBox(width: 60),
Column(
children: <Widget>[
Text(
'${menu.dayOfMonth} ${menu.monthFull}',
style: TextStyle(
color: Color(0xff333333),
fontSize: 14,
fontWeight: FontWeight.w400,
fontFamily: 'Fira Sans'),
),
],
),
Expanded(
child: Column(
children: <Widget>[
Padding(
padding:
const EdgeInsets.fromLTRB(10.0, 0, 0, 0),
child: Container(
decoration: BoxDecoration(
//color: Colors.red,
border: Border(
bottom: BorderSide(
color: Color(0xff4A4A4A4A)),
)),
),
),
],
))
)
]
);
}
)
but for me I make use of map as child of Listview