I want to remove the gap between these two columns.
How can I achieve this?
This is the code which I tried. The Expanded() here is inside the Row() widget.
I would like to decrease the gap between the two Columns(). I tried wrapping both Columns inside a Container and implementing Padding on it, but it doesn't work. I tried mainAxisAlignment also.
Expanded(
child: Column(
children: <Widget>[
Container(
width: 98.0,
child: Card(
child: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Room 1',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top:8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
Icons.check_box_outline_blank
),
Icon(
Icons.check_box,
)
],
),
),
),
),
),
],
),
),
Expanded(
child: Column(
children: <Widget>[
Container(
width: 98.0,
child: Card(
child: ListTile(
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Room 1',
style: TextStyle(
fontWeight: FontWeight.bold,
),
),
],
),
subtitle: Padding(
padding: const EdgeInsets.only(top:8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Icon(
Icons.check_box_outline_blank
),
Icon(
Icons.check_box,
)
],
),
),
),
),
),
],
),
)
The issue was solved by using Flexible() instead of Expanded().
Thanks to: Jay Patel
Related
I am using pdf package for creating a PDF file in my app. I am trying to show transaction list of a month based on day. I was able to create pages for the first list using Wrap() widget. But for the inner transaction list it shows me error for more then 8 element. It doesn't break page automatically for list overflow.
So is there any solution for this problem?
Here is my code
class PdfParagraphApi {
static Future<File> generate(title) async {
final pdf = Document();
final customFont = Font.ttf(await rootBundle.load('assets/OpenSans-Regular.ttf'));
pdf.addPage(
MultiPage(
build: (context) => <Widget>[
Wrap(
children: List<Widget>.generate(7, (index) {
return Container(
margin: EdgeInsets.only(top: 3),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Header(child: Text(
"08 Sep, 2021",
style: TextStyle(
color: PdfColors.purple300,
fontWeight: FontWeight.bold,
fontSize: 17
)
)),
///////////////////////// error starts here ////////////////
Container(
child: Wrap(
children: List<Widget>.generate(9, (ind) {
return cards();
}))
////////////////////////////////////////////////////////
)
]
)
);
})
)
],
),
);
return PdfApi.saveDocument(name: 'my_example.pdf', pdf: pdf);
}
static Widget cards() => Container(
decoration: BoxDecoration(
color: PdfColors.grey300,
borderRadius: BorderRadius.circular(5)
),
margin: EdgeInsets.only(bottom: 8),
child: Container(
// width: 300,
margin: EdgeInsets.all(8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Flexible(
child: Container(
margin: EdgeInsets.only(left: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
child: Text(
"VISA",
style: TextStyle(
fontSize: 16
)
),
),
SizedBox(height: 5),
Container(
child: Text(
"Token: 435645tRER3 Time: 12:45",
),
),
],
),
),
Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Row(
children: [
Text(
"GBP 56.07",
maxLines: 1,
style: TextStyle(
fontWeight: FontWeight.bold
)
),
Text(
// " - ${charge.refundDetails.refundedAmount}",
" - 45.87",
style: TextStyle(
fontSize: 12,
color: PdfColors.red,
),
)
],
),
SizedBox(height: 5),
Text(
"refunded",
style: TextStyle(
color: PdfColors.green),
),
SizedBox(height: 5),
Text(
"Captured",
),
],
),
),
],
),
),
),
],
),
),
);
}
so I want to make a simple text in a flutter framework, but I don't know to make the text for going on the top of the text, this is the example of the image I want to be on top :
this is my DetailPage.dart :
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text(
'Detail ' + itemJudul,
style: TextStyle(color: Colors.white),
)),
body: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Center(child: Image.asset(itemImage)),
Text(
itemJudul,
style: TextStyle(color: Colors.redAccent, fontSize: 30.0),
),
Text(itemSub),
Text('Sisa Item =' + qty),
Container(
width: 200,
child: Text("Bahan Bahan",
textAlign: TextAlign.left,
style: new TextStyle(fontWeight: FontWeight.bold) // has impact
),
alignment: Alignment.centerLeft,
),
Container(
child: Text(
listbahanan,
textAlign: TextAlign.left,
),
alignment: Alignment.centerLeft,
),
Container(
child: Text(
listbahan2,
textAlign: TextAlign.right,
),
alignment: Alignment.center,
padding: EdgeInsets.all(5),
)
],
),
);
}
U can use two columns wrapped in a row.
Row(
children: [
Expanded(
child: Container(
child: Text(
listbahanan,
textAlign: TextAlign.left,
),
alignment: Alignment.centerLeft,
),
),
Expanded(
child: Container(
child: Text(
listbahan2,
textAlign: TextAlign.right,
),
alignment: Alignment.center,
padding: EdgeInsets.all(5),
)
],
),
You need to use Row to align two lists side by side. Also, I don't think it's a good idea to store a list as string, better use List for storing and ListView for displaying the list items.
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.redAccent,
title: Text(
'Detail ' + itemJudul,
style: TextStyle(color: Colors.white),
)),
body: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Center(child: Image.asset(itemImage)),
Text(
itemJudul,
style: TextStyle(color: Colors.redAccent, fontSize: 30.0),
),
Text(itemSub),
Text('Sisa Item =' + qty),
Container(
width: 200,
child: Text("Bahan Bahan",
textAlign: TextAlign.left,
style: new TextStyle(fontWeight: FontWeight.bold) // has impact
),
alignment: Alignment.centerLeft,
),
Row( // this is new
children: <Widget>[
Flexible( // this is new
child: Text(
listbahanan,
textAlign: TextAlign.left,
),
),
Flexible( // this is new
child: Text(
listbahan2,
textAlign: TextAlign.right,
),
)
],
),
],
),
);
}
I use row widget with two widgets inside, a text widget and iconbutton but iconbutton is not aligned with text and I don't know how to do it. This is a screenshot to show you
Row(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: widgets[index],
),
IconButton(
icon: Icon(
Icons.close,
size: 25,
color: Colors.grey,
),
onPressed: () => {
setState(() {
widgets.remove(widgets[index]);
}),
})
],
),
Use mainAxisSize: MainAxisSize.min,
Container(
decoration: BoxDecoration(
border: Border.all(color: Colors.grey, width: 1),
borderRadius: BorderRadius.all(Radius.circular(8.0))),
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
'Theo',
style:
TextStyle(color: Colors.deepOrangeAccent, fontSize: 20),
),
),
IconButton(
icon: Icon(
Icons.close,
size: 25,
color: Colors.grey,
),
onPressed: () => {})
],
),
),
Output:
replace CrossAxisAlignment.start with CrossAxisAlignment.baseline and add textBaseline: TextBaseline.alphabetic like this:
Row(
mainAxisSize: MainAxisSize.min,
textBaseline: TextBaseline.alphabetic,
crossAxisAlignment: CrossAxisAlignment.baseline,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left: 10),
child: widgets[index],
),
IconButton(
icon: Icon(
Icons.close,
size: 25,
color: Colors.grey,
),
onPressed: () => {
setState(() {
widgets.remove(widgets[index]);
}),
})
],
),
You may need this to confirm:
I used InkWell instead of iconbutton and it works
I'm making custom toolbar with background shape but my back button is getting correct the alignment to the text
Widget _toolBar(String headerText){
return Container(
decoration: BoxDecoration(
color: MyColors.greenHeader,
borderRadius: new BorderRadius.only(
bottomLeft: const Radius.circular(15.0),
bottomRight: const Radius.circular(15.0))
),
child:Center(child: Stack(
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child:Text(headerText,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
)
),),
],),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 1,
child:IconButton(
icon: new Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: (){},
)
),
],),
],
),)
);
}
The above code also tried without stack by Using Row with expanded but the text alignment going wrong the text getting center to its expanded widget n
return Scaffold(
body: Stack(
children: <Widget>[
Container(
decoration: _buildBackground(),
),
Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 13,
child:_toolBar('VENUE LOGIN')
),
Expanded(
flex: 87,
child: Container(
child: LoginBody(),
),
)
],
)
],
),
);
You can try center your Text and IconButton widgets.
Stack(
children: <Widget>[
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Expanded(
flex: 1,
child: Text(headerText,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.white,
fontSize: 18.0,
)),
),
],
),
),
Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: <Widget>[
Flexible(
flex: 1,
child: IconButton(
icon: new Icon(Icons.arrow_back_ios),
color: Colors.white,
onPressed: () {},
)),
],
),
),
],
),
You can Try like this
appBar: PreferredSize(
preferredSize: Size(null, 100),
child: Container(
width: MediaQuery.of(context).size.width,
height: 100,
child: ClipRRect(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(15),
bottomRight: Radius.circular(15)
),
child: Container(
color: Colors.green,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Icon(Icons.navigate_before,size: 40,),
Text("Center",style: TextStyle(fontSize: 30),),
Icon(Icons.navigate_before,color: Colors.transparent,),
],
),
),
),
),
),
I want make a button with text and icon inside it, with custom background color and custom width. with fix position (not scrollable). would you like to help me please ?
here are the code:
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.shifting,
currentIndex: 0, // this will be set when a new tab is tapped
items: [
BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.red),
BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.yellow)
]
its only give a color for the icon.
this is what I want:
Here you go
Widget build(context) {
return Scaffold(
bottomNavigationBar: Container(
height: 56,
margin: EdgeInsets.symmetric(vertical: 24, horizontal: 12),
child: Row(
children: <Widget>[
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.chat, color: Colors.white), Text("CHAT", style: TextStyle(color: Colors.white))],
),
),
Container(
width: 66,
color: Colors.green,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[Icon(Icons.notifications_active, color: Colors.white), Text("NOTIF", style: TextStyle(color: Colors.white))],
),
),
Expanded(
child: Container(
alignment: Alignment.center,
color: Colors.red,
child: Text("BUY NOW", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
),
),
],
),
),
);
}
You may want to look at the concept of a BottomAppBar instead.
This bar accepts any widget as children not just BottomNavigationBarItems.
You could try this:
BottomAppBar(
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
child: SizedBox(
height: 44,
child: Material(
type: MaterialType.transparency,
child: InkWell(
onTap: () {},
child: Column(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(Icons.add, color: Colors.blue, size: 24),
Text("Add")
],
),
),
),
),
),
]
),
)