DataTable to fit screen width

[Mutlu Şimşek]

Hello,

I am trying to create a simple league table app using DataTable in Flutter. The problem is that only first three columns are displayed in emulator and I don't want it to be scroll-able. I want all the columns to fit the screen width. I tried using SizedBox.expand as a child within a container of width 300 but it didn't work. Am I doing something wrong or is there any other way of solving this problem?

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Episode5());
  }
}

class Episode5 extends StatefulWidget {
  @override
  Episode5State createState() {
    return new Episode5State();
  }
}

class Episode5State extends State<Episode5> {
  Widget bodyData() => DataTable(
          columns: <DataColumn>[
            DataColumn(label: Text("Pos")),
            DataColumn(label: Text("Club")),
            DataColumn(label: Text("P")),
            DataColumn(label: Text("W")),
            DataColumn(label: Text("D")),
            DataColumn(label: Text("L")),
            DataColumn(label: Text("GD")),
            DataColumn(label: Text("Pts")),
          ],
          rows: teams
              .map(
                (team) => DataRow(
                      cells: [
                        DataCell(Text(team.pos.toString())),
                        DataCell(Text(team.name)),
                        DataCell(Text(team.p.toString())),
                        DataCell(Text(team.w.toString())),
                        DataCell(Text(team.d.toString())),
                        DataCell(Text(team.l.toString())),
                        DataCell(Text(team.gd.toString())),
                        DataCell(Text(team.pts.toString()))
                      ],
                    ),
              )
              .toList());

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("League Table"),
      ),
      body: Container(
        width: 300,
        child: SizedBox.expand(
          child: bodyData(),
        ),
      ),
    );
  }
}

class Team {
  int pos, p, w, d, l, gd, pts;
  String name;
  Team(
      {this.pos, this.name, this.p, this.w, this.d, this.l, this.gd, this.pts});
}

var teams = <Team>[
  Team(pos: 1, name: "Basaksehir", p: 14, w: 9, d: 3, l: 2, gd: 13, pts: 30),
  Team(pos: 2, name: "Kasimpasa", p: 14, w: 8, d: 2, l: 4, gd: 10, pts: 26),
  Team(pos: 3, name: "Besiktas", p: 14, w: 7, d: 3, l: 4, gd: 8, pts: 24),
];

[EthicCoders Apps]

The column spacing of a Data Table is fixed default at 56dp (and is const). So if you are feeling adventurous do this... Go to data_table.dart  search for this var _columnSpacing and make it 16.0 (given below): 

static const double _columnSpacing = 16.0;

Then you would get the desired results (below screenshot):

--
You received this message because you are subscribed to the Google Groups "Flutter Dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to flutter-dev...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mutlu Şimşek]

it works, thank you very much.

EthicCoders Apps <ap...@ethiccoders.com>, 7 Ara 2018 Cum, 20:44 tarihinde şunu yazdı: