flutter – Table outside border

main.dart

import 'dart:math';
import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      theme: ThemeData(primarySwatch: Colors.pink),
      home: Scaffold(
          appBar: AppBar(
              title: const Text("Flutter - Table Outside Border")
          ),
          body: bodyContent()
      ),
    ),
  );
}

bodyContent(){
  return Padding(
    padding: const EdgeInsets.all(16),
    child: Table(
        border: TableBorder.symmetric(
          outside: BorderSide(
            color: Colors.green.shade300,
            width: 2,
            style: BorderStyle.solid,
          ),
        ),
        children: [
          TableRow(children: [getBox(),getBox(),getBox()]),
          TableRow(children: [getBox(),getBox(),getBox()]),
          TableRow(children: [getBox(),getBox(),getBox()]),
          TableRow(children: [getBox(),getBox(),getBox()]),
          TableRow(children: [getBox(),getBox(),getBox()])
        ]
    ),
  );
}

getBox(){
  Color color = Colors.primaries[
  Random().nextInt(Colors.primaries.length)
  ].shade200;
  return Container(
      height: 75, width: double.infinity,
      color: color,margin: const EdgeInsets.all(8)
  );
}

More flutter tutorials

• flutter – Function multiple parameters
• flutter – How to create custom function
• flutter – Table column different width
• flutter – Table intrinsic column width
• flutter – Table cell vertical alignment
• flutter – Table border
• flutter – Table border radius
• flutter – Table inside border
• flutter – Table vertical inside border
• flutter – Table border only bottom
• flutter – Table row background color
• flutter – How to use FractionallySizedBox
• flutter – How to use SizedBox
• flutter – SizedBox background color
• flutter – SizedBox border radius