flutter – Table border only bottom

main.dart

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

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

bodyContent(){
  return Padding(
    padding: const EdgeInsets.all(16),
    child: Table(
        border: const TableBorder(
            bottom: BorderSide(
                width: 2.0,
                color: Colors.black26,
                style: BorderStyle.solid
            )
        ),
        children: [
          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(12)
  );
}

More flutter tutorials

• flutter – Function multiple parameters
• flutter – How to create custom function
• flutter – Table cell vertical alignment
• flutter – Table border
• flutter – Table symmetric border
• flutter – Table horizontal inside border
• flutter – Table vertical inside border
• flutter – Table row background color
• flutter – How to use FractionallySizedBox
• flutter – How to use SizedBox
• flutter – SizedBox background color
• flutter – BoxDecoration border
• flutter – BoxDecoration border only
• flutter – BoxDecoration gradient
• flutter – How to wrap text