I need to create a full screen table using Flutter. Since I wasn't able to do so with Table
/DataTable
I'm trying with Flex
/Expanded
.
Everithing works as expected, but I can't style Expanded
's child
, so for instance it seems I cannot set a padding.
This is my code so far.
main.dart
:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: Calendar2(),
);
}
}
calendar2.dart
:
import 'package:flutter/material.dart';
class Calendar2 extends StatefulWidget {
@override
State<StatefulWidget> createState() => _Calendar2State();
}
class _Calendar2State extends State<Calendar2> {
@override
Widget build(BuildContext context) {
List<CalendarRow> tableRows = buildTable();
print(tableRows);
return Scaffold(
body: Flex(
direction: Axis.vertical,
children: tableRows,
)
);
}
List<CalendarRow> buildTable() {
List<CalendarRow> rows = <CalendarRow>[];
for(int i=0; i<4; i++) {
List<Widget> children = [];
for(int j=0; j<7; j++) {
children.add(
CalendarCell(
child: Text((i * 7 + j + 1).toString())
)
);
}
rows.add(
CalendarRow(
children: children
)
);
}
return rows;
}
}
class CalendarCell extends StatelessWidget {
Widget child;
CalendarCell({this.child}) {}
@override
Widget build(BuildContext context) {
return Expanded (
flex: 1,
child: Padding(
child: child,
padding: EdgeInsets.all(0.0), // this doesn't work for top and bottom
)
);
}
}
class CalendarRow extends StatelessWidget {
List<Widget> children = <Widget>[];
CalendarRow({this.children}) {}
@override
Widget build(BuildContext context) {
return Expanded(
flex: 1,
child: Flex(
direction: Axis.horizontal,
children: children
)
);
}
}
How can I style child
inside Expanded
?
Using an Expanded widget makes a child of a Row, Column, or Flex expand to fill the available space along the main axis (e.g., horizontally for a Row or vertically for a Column). If multiple children are expanded, the available space is divided among them according to the flex factor.
But in Flutter, if you want add some extra space around a widget, then you wrap it in a Padding widget. Now to add padding, wrap the Text widget with a Padding widget. In Android Studio this can be accomplished by placing your cursor on the widget and pressing Option+Enter (or Alt+Enter in Windows/Linux).
This is how padding is done with Expanded widget in flutter
class DicePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Center(
child: Row(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/dice1.png'),
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Image.asset('images/dice1.png'),
),
),
],
),
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With