Flutter Flexible in Card - flutter

Question

i'm having problems using flexible widget in card. I used Constrained Box but i'd like to use a widget without setting width. But if i use Flexible widget, card doesn't show up anymore.
My goal is to make text use all the available space without setting a constant width
Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:wemaind_mobile_app/pages/tasks/tasks_page.dart';
import 'package:wemaind_mobile_app/theme/colors.dart';
import 'board_entity.dart';
import 'task_counter.dart';
class BoardWidget extends StatelessWidget {
final BoardEntity board;
static const colors = WemaindColors();
BoardWidget(this.board);
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return ConstrainedBox(constraints: BoxConstraints(maxWidth: 500, minWidth: 280, minHeight: 300),
child:GestureDetector(
onTap: () {
Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)
{return TasksPage(board: board);
}));
},
child:
Container(
height: MediaQuery.of(context).size.height * 0.2,
child: Card(margin: EdgeInsets.only(top: 0, bottom: 16, left: 16, right: 16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic,
children: [
Flexible(
child: Text(board.name,
style: theme.textTheme.headline2,
)),
if (board.bookmarked) Icon(Icons.star, color: colors.orange),
],
),
Row(children:[
Flexible(
child: Text(board.role.toUpperCase(),style: theme.textTheme.headline4,overflow: TextOverflow.ellipsis,)),
]),
]),
Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,children: [
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text(board.tasks.all.toString(), style: theme.textTheme.headline1),
Icon(Icons.more_vert, color: colors.blue.shade800, size: 32),
]),
Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text('TASK'.toUpperCase(), style: theme.textTheme.headline5),
])
]),
]),
Table(
children: [
TableRow(children: [
TaskCounter('PRIORITARI', Icons.bolt, colors.orange, board.tasks.prioritized),
TaskCounter('IN SCADENZA', Icons.alarm, colors.red, board.tasks.expiring),
Container(),
]),
TableRow(children: [
TaskCounter('MIEI', Icons.person, theme.accentColor, board.tasks.owned),
TaskCounter('DEL TEAM', Icons.group, theme.accentColor, board.tasks.teamOwned),
TaskCounter('IN AVVIO', Icons.calendar_today, theme.accentColor, board.tasks.starting),
])
]
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
),
),
),
)
)
);
}
}
Hope someone can help me :)

Answer 1

try to use the space smarter. this code will save you from your problems
class BoardWidget extends StatelessWidget {
// final BoardEntity board;
// static const colors = WemaindColors();
// BoardWidget(this.board);
#override
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Scaffold(
body: SafeArea(
child: GestureDetector(
// onTap: () {
// Navigator.of(context).push(MaterialPageRoute(builder: (BuildContext context)
// {return TasksPage(board: board);
// }));
// },
child:
Container(
height: 300,
width: 400,
child: Card(margin: EdgeInsets.only(top: 0, bottom: 16, left: 16, right: 16),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
child: Row(crossAxisAlignment: CrossAxisAlignment.baseline, textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text("board.name",
),
),
if (true) Icon(Icons.star, color: Colors.orange),
],
),
),
Expanded(
child: Row(children:[
Expanded(child: Text("board.role.toUpperCase()", overflow: TextOverflow.ellipsis,)),
]),
),
]),
),
Expanded(
child: Column(mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start,children: [
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Expanded(child: Text("board.tasks.all.toString()")),
Icon(Icons.more_vert, color: Colors.blue.shade800, size: 32),
]),
),
Expanded(
child: Row(mainAxisAlignment: MainAxisAlignment.start, children: [
Text('TASK'.toUpperCase()),
]),
)
]),
),
]),
),
Table(
children: [
TableRow(children: [
Container(child: Icon(Icons.bolt)),
Container(child: Icon(Icons.alarm)),
Container(),
]),
TableRow(children: [
Container(child: Icon(Icons.person),),
Container(child: Icon(Icons.group),),
Container(child: Icon(Icons.calendar_today),),
])
]
),
],
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.min,
),
),
),
)
),
),
);
}
}