I am new to flutter, and I'm facing some layout errors that I cannot understand. Does someone knows why this error occurs? I know that Column widget cannot contain the Listview widget so I tried to wrap Listview widget with the Expanded, I cannot understand why the Expanded widget doens't work.
Here is my code. _buildBody function is not the part that error occurs so I will not write it.
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 0, 0, 0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
"공지",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 16.0),
),
SizedBox(width: 5),
StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance
.collection('Announcement')
.where('concertname', isEqualTo: widget.replay.title)
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return CircularProgressIndicator();
return Text(
snapshot.data.docs.length.toString(),
style: TextStyle(
color: Colors.black26,
fontWeight: FontWeight.w500,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 14.0),
);
},
),
],
),
SizedBox(
height: 5,
),
_buildBody(context),
],
),
),
Divider(
height: 30,
thickness: 6,
color: Color(0xffecedf4),
),
Padding(
padding: const EdgeInsets.only(left: 20, right: 20),
child: Column(
children: [
Container(
height: 50,
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"팬 피드",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w700,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 16.0),
),
Spacer(),
Text("최신순",
style: const TextStyle(
color: Colors.black26,
fontWeight: FontWeight.w300,
fontFamily: "AppleSDGothicNeo",
fontStyle: FontStyle.normal,
fontSize: 12.0),
textAlign: TextAlign.right),
SizedBox(
child: Icon(
UniconIcon.iconchart,
color: Colors.black26,
),
),
],
),
),
Expanded(
child: ListView(
children: [
CircleAvatar(
backgroundImage: NetworkImage(
"https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
),
CircleAvatar(
backgroundImage: NetworkImage(
"https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
),
CircleAvatar(
backgroundImage: NetworkImage(
"https://lh3.googleusercontent.com/-5L9kDOItRJw/AAAAAAAAAAI/AAAAAAAAAAA/AMZuucmTNvDI3AljkDx1LMhuDaypX57yhA/s96-c/photo.jpg"),
),
],
)),
],
),
),
],
);
}
The problem is that you have two Column widgets here and the first passes unconstrained bounds to its children, hence, despite you using Expanded in the ListView that is inside the second Column (which is correct) you need also to wrap your second Column in a Expanded as well so it knows its constraints.
However, by looking at your code, looks like you are not using the second Column as advantage to nothing and if its because of the Padding just apply it to the first instead, so I recommend you to remove it at all and it should work as well.
Use shrinkWrap:true inside ListView
Related
I am working on a web design where I need to create several ListViews in one page. Now, I also want that my whole page will also be scrollable like a webpage. What happening is that with SingleChildScrollView ListViews stop scrolling. I am using Expanded and tried several ways but unable to find a solution. Anybody, knows how to solve this? Thank you very much in advance.
class SchemaPage extends StatelessWidget {
final String text;
SchemaPage({Key? key, required this.text}) : super(key: key);
//If I use SingleChildScrollView here, My list views stop scrolling but If I remove ListView, it works fine.
Widget build(BuildContext context) => Scaffold(
body: Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
AppBar(), //Custom App Bar
SizedBox(
height: 15,),
Expanded(
flex: 2,
child: Container(
width: 264,
padding: EdgeInsets.all(36),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Scheme',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(
height: 10,
),
Text(
'Person',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(
height: 20,
),
Expanded(
flex:4,
child: Container(
child: ListView(
shrinkWrap: true,
children: [
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
],
),
),
),
SizedBox(
height: 5,
),
InkWell(
child: Text('more',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w700)),
onTap: () {},
),
SizedBox(height: 30,),
Text(
'Person',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
SizedBox(height: 30,),
//Here I wanted to use another ListView but I need to make page scrollable
],
),
),
),
],
),
),
);
}
I found the solution. With SingleChildScollView() widget, I do not need to use Expanded widget. Moreover, I need to give my ListView() fixed height by wrapping it either in Container() widget or SizedBox() widget.
class SchemaPage extends StatelessWidget {
final String text;
SchemaPage({Key? key, required this.text}) : super(key: key);
Widget build(BuildContext context) => SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(height: 110, child: AppBar()),
Container(
padding: EdgeInsets.all(36),
child: Text(
'Schema',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 24,
fontWeight: FontWeight.w700,
color: Colors.black),
),
),
Container(
padding: EdgeInsets.only(left: 36),
child: Text(
'Person',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
),
Container(
padding: EdgeInsets.only(left: 36),
width: 264,
height: 300,
child: ListView(
//physics: ClampingScrollPhysics(),
shrinkWrap: true,
children: [
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
SizedBox(
height: 10,
),
PersonWidget(),
],
),
),
SizedBox(
height: 5,
),
Container(
padding: EdgeInsets.only(left: 36),
child: InkWell(
child: Text('More',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 14,
fontWeight: FontWeight.w700)),
onTap: () {},
),
),
SizedBox(height: 30,),
Container(
padding: EdgeInsets.only(left: 36),
child: Text(
'Plans',
style: TextStyle(
fontFamily: 'Roboto',
fontSize: 20,
fontWeight: FontWeight.w700,
color: Colors.black),
),
),
SizedBox(height: 30,),
],
),
);
}
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'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
I have the following container and in it I call a function to create child widget. The issue it that child row always remain as center align. I have tried two methods
alignment:Alignment.topLeft,
I have tried to embed it further into a column and tried crossAxisAlignment: CrossAxisAlignment.start.
Both methods fails to align the element to the left. It keep remains into the center part of the container. What could be wrong below is my codes.
Container(
alignment:Alignment.topRight,
margin: const EdgeInsets.fromLTRB(10, 10, 0, 0),
padding: const EdgeInsets.fromLTRB(0, 10, 0, 10),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
buildDateTime("datetime"),
]
)
],
)
),
Below is the widget which I call to build the row.
Widget buildDateTime(String plate) {
return new Container(
child: Container(
color: Colors.transparent,
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.access_time, size: 15.0, color: lightGrey),
Text(
' 23/01/20202',
style: new TextStyle(
color: lightGrey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: new TextStyle(
color: lightGrey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
),
);
}
Here is the screen shot.
I've made the Clock icon align to the left, Date centered and time aligned to the right. Is this what you are trying to achieve?
Container(
color: Colors.grey,
alignment:Alignment.topRight,
padding: const EdgeInsets.fromLTRB(20, 10, 20, 10),
child: buildDateTime("datetime")
);
Widget buildDateTime(String plate) {
return new Container(
child: Container(
color: Colors.transparent,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.access_time, size: 15.0, color: Colors.grey[100]),
Text(
' 23/01/20202',
style: new TextStyle(
color: Colors.grey[100],
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: new TextStyle(
color: Colors.grey[100],
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
),
);
}
My result:
I am unable to reproduce the issue you mentioned. For me, its occupies full width.
Try this,
Widget buildDateTime(String plate) {
return Align(
alignment: Alignment.centerLeft,
child: Row(
mainAxisSize: MainAxisSize.min,
mainAxisAlignment: MainAxisAlignment.start,
children: [
Icon(Icons.access_time, size: 15.0, color: Colors.grey),
Text(
' 23/01/20202',
style: const TextStyle(
color: Colors.grey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
Text(
' 09:00',
style: const TextStyle(
color: Colors.grey,
fontFamily: "Bpreplay",
fontWeight: FontWeight.w400,
fontSize: 14.0,
),
),
],
),
);
}
I have a column with three rows:
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
print('card of course clicked');
},
child: Card(
shape: RoundedRectangleBorder(borderRadius:
BorderRadius.circular(8.0)),
child: Container(
height: 144,
child: Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(8.0)),
child: Image.network(_model._schoolThumb))),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Align(
alignment: Alignment.center,
child: Text(_model._schoolName,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18)),
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.location_on, color: Colors.grey[700]),
Container(width: 8),
Text(_model._guides,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400)),
],
),
SizedBox(height: 12),
Row(
children: <Widget>[
Icon(Icons.attach_money, color: Colors.grey[700]),
Container(width: 8),
Text(_model._priceFrom,
style: TextStyle(
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400))
],
)
],
)
]),
),
),
);
}
As a result, I have three rows aligned to start.
How can I align the first Text() in the center? Giving properties to the text and wrapping in Expanded, Container, Stack didn't help, or I did it in the wrong way. Thanks in advance!
EDIT
Whole build() method attached
Problem:
By default, the width of the Column is set to the width of the widest child widget of Column.
Solution:
You need to wrap your Column with either Expanded or Flexible.
Like below.
Expanded(
child: Column(
children: <Widget>[
...
],
),
)
or
Flexible(
child: Column(
children: <Widget>[
...
],
),
)
And then need to use the Align or Center widget to set the alignment to your child widget in your case the Text widget.
Like below:
Align(
alignment: Alignment.center,
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
or
Center(
child: Text(
"Test",
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.w600,
fontSize: 18,
),
),
),
UPDATE
You haven't given a width to the column so it does not know the remaining width that it can take. So wrap your column in a flexible which will give it the width remaining to expand.
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(height: 16),
Row(