Skip to content

Instantly share code, notes, and snippets.

@rena2019
Last active July 10, 2025 08:41
Show Gist options
  • Save rena2019/886fc4afb598b7822925fa0248fc821a to your computer and use it in GitHub Desktop.
Save rena2019/886fc4afb598b7822925fa0248fc821a to your computer and use it in GitHub Desktop.
Flutter center graphic with label left and right (with table)
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(home: const MyHomePage());
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
const double buttonWidth = 100;
double tabWidth = (MediaQuery.of(context).size.width - buttonWidth) / 2; //
return Scaffold(
appBar: AppBar(
backgroundColor: Theme.of(context).colorScheme.inversePrimary,
title: Text("Table"),
),
body: Column(
children: [
//1. Row
Table(
columnWidths: <int, TableColumnWidth>{
0: MinColumnWidth(
FixedColumnWidth(tabWidth),
FlexColumnWidth(1.0),
),
1: FixedColumnWidth(buttonWidth),
2: MinColumnWidth(
FixedColumnWidth(tabWidth),
FlexColumnWidth(1.0),
),
},
children: [
TableRow(
children: [
Text('LEFT', textAlign: TextAlign.right),
SizedBox(
width: buttonWidth,
height: buttonWidth,
child: Image.network(
'https://dummyimage.com/${buttonWidth}x${buttonWidth}/EEE/31343C', // Placeholder image URL
fit: BoxFit.cover,
),
),
Text('', textAlign: TextAlign.left),
],
),
],
),
//2. Row
Table(
columnWidths: <int, TableColumnWidth>{
0: MinColumnWidth(
FixedColumnWidth(tabWidth),
FlexColumnWidth(1.0),
),
1: FixedColumnWidth(buttonWidth),
2: MinColumnWidth(
FixedColumnWidth(tabWidth),
FlexColumnWidth(1.0),
),
},
children: [
TableRow(
children: [
Text('', textAlign: TextAlign.right),
SizedBox(
width: buttonWidth,
height: buttonWidth,
child: Image.network(
'https://dummyimage.com/${buttonWidth}x${buttonWidth}/EEE/31343C', // Placeholder image URL
fit: BoxFit.cover,
),
),
Text('RIGHT', textAlign: TextAlign.left),
],
),
],
),
],
),
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment