Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Padding inside Expanded

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?

like image 758
BackSlash Avatar asked Oct 04 '18 08:10

BackSlash


People also ask

What is flex in 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.

How do you use padding in Flutter?

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).


1 Answers

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'),
        ),
      ),
    ],
  ),
);
like image 74
Yeshi Avatar answered Sep 26 '22 05:09

Yeshi