Flutter lab practice manual

1. Displaying an image widget in the app

import 'package:flutter/material.dart';
// function to start app building
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// This widget is the root
// of your application
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text(
'Insert Image in the mobile app Demo',
),
),
body: Center(
child: Row(
children: <Widget>[
Image.asset(
 'assets/images/mobile.jpeg',
height: 200,
width: 200,
),
Image.asset(
'assets/images/flutter.jpeg',
height: 200,
width: 200,
),
], //<Widget>[]
), //Column
), //Center
),
);
}
}
2. Display network(internet) image

import
'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends
StatelessWidget {
@override
Widget build(BuildContext
context) {
return MaterialApp(

debugShowCheckedModeBanner:
false,
home:
NetworkImageScreen(),
);
}
}

class NetworkImageScreen extends

StatelessWidget {
final String imageUrl =
'https://images.unsplash.com/pho
to-1606787366850-de6330128bfc';
// Replace with your own image
URL

@override
Widget build(BuildContext
context) {
return Scaffold(
appBar: AppBar(title:
Text('displaying Network Image
Example')),
body: Center(
child: Image.network(
imageUrl,
loadingBuilder:
(context, child,
loadingProgress) {
 if (loadingProgress
== null) return child;
return Center(
child:
CircularProgressIndicator(
value:
loadingProgress.expectedTotalByt
es != null ?
loadingProgress.cumulativeBytesL
oaded
/(loadingProgress.expectedTotalB
ytes ?? 1)
: null,
),
);
},
errorBuilder:
(context, error, stackTrace) {
return Text('Failed to load
image',
style: TextStyle(color:
Colors.red));
},
fit: BoxFit.cover,
width: 300,
height: 300,
),
),
);
}
}
Output…
To display a video from assets in a Flutter app,
you can use the video_player package. Here’s
how you can do it step by step.
Steps to Display Video from Assets:
Add the video_player package to your
pubspec.yaml:
dependencies:
flutter:
 sdk: flutter
video_player: ^2.4.5 # Check for the latest
version
Run flutter pub get in your terminal to install
the package.

Prepare the video file:

Add your video file to the assets folder in your
project (e.g., assets/video/your_video.mp4).
Make sure you add the video file to the
pubspec.yaml under the assets section.
flutter:
assets:
- assets/video/your_video.mp4
3.Flutter route and navigation
import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp(
home: RunMyApp(),
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.green),
 ));
}
class RunMyApp extends StatelessWidget {
RunMyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context, MaterialPageRoute(builder: (context) =>
NextPage()));
},
child: Text('Goto Next Page')),
),
);
}
}
class NextPage extends StatelessWidget {
 const NextPage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('developers Page'),
),
body: Center(
child: Text('5th computer science students'),
),
);
}
}
Output….

5. Gradient to Container Background

import 'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
class RunMyApp extends StatelessWidget {
const RunMyApp({super.key});
@override
Widget build(BuildContext context) {
 return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(
title: Text('Gradient Background'),
),
body: Container(
width: double.maxFinite,
height: double.maxFinite,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.green, Color.fromARGB(255, 29, 221, 163)],
),
),
child: Center(child: Text('Set Gradient to Container Background'))),
),
);
}
}

Output….
1. Flutter Text field
import 'package:flutter/material.dart';
void main() {
 runApp(MaterialApp(
home: const MyApp(),
));
}
class MyApp extends StatefulWidget {
const MyApp({super.key});
@override
_State createState() => _State();
}

class _State extends State<MyApp> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
 ),
),
ElevatedButton(
style: ElevatedButton.styleFrom(
foregroundColor: Colors.white, // Text color
backgroundColor: Colors.blue, // Button color
),
child: Text( 'Sign In', style: TextStyle( color: Colors.white), //
Correct way to set text color
),
onPressed: () {},
)
],
)));
}
}
1. Flutter text form field
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
const appTitle = 'text Form field Styling Demo';
return MaterialApp(
title: appTitle,
home: Scaffold(
appBar: AppBar(
title: const Text(appTitle),
),
body: const MyCustomForm(),
),
);
}
}
class MyCustomForm extends StatelessWidget {
const MyCustomForm({super.key});
@override
 Widget build(BuildContext context) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Padding(
padding: EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
),
Padding(padding: const
EdgeInsets.symmetric(horizontal: 8, vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
 ),
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8,
vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your password',
),
),
),
Padding(padding: const EdgeInsets.symmetric(horizontal:
8, vertical: 16),
child: TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your email',
),
 ),
),
],
);
}
}

Output….
2. Validation of text form field
import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final GlobalKey<FormState> _formKey =
GlobalKey<FormState>();
 AutovalidateMode _autoValidate =
AutovalidateMode.disabled;
String? _name;
String? _mobile;
String? _email;
void _validateInputs() {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
} else {
setState(() {
_autoValidate = AutovalidateMode.always;
});
}
}

@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
 title: const Text('Form Validation'),
),
body: SingleChildScrollView(
child: Container(
margin: const EdgeInsets.all(15.0),
child: Form(
key: _formKey,
autovalidateMode: _autoValidate,
child: formUI(),
),
),
),
),
);
}
Widget formUI() {
return Column(
children: <Widget>[
TextFormField(
 decoration: const InputDecoration(labelText:
'Name'),
keyboardType: TextInputType.text,
validator: validateName,
onSaved: (String? val) {
_name = val;
},
),
TextFormField(
decoration: const InputDecoration(labelText:
'Mobile'),
keyboardType: TextInputType.phone,
validator: validateMobile,
onSaved: (String? val) {
_mobile = val;
},
),
TextFormField(
decoration: const InputDecoration(labelText:
'Email'),
 keyboardType: TextInputType.emailAddress,
validator: validateEmail,
onSaved: (String? val) {
_email = val;
},
),
const SizedBox(
height: 10.0,
),
OutlinedButton(
onPressed: _validateInputs,
child: const Text('Validate'),
)
],
);
}

String? validateName(String? value) {

if (value!.isEmpty) {
return 'Name cannot be empty';
 }
if (value.length < 3) {
return 'Name must be more than 2 charater';
} else {
return null;
}
}
String? validateMobile(String? value) {
if (value!.isEmpty) {
return 'Phone number cannot be empty';
}
if (value.length != 10) {
return 'Mobile Number must be of 10 digit';
} else {
return null;
}
}
String? validateEmail(String? value) {
String pattern =
 r'^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]
+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.
[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
RegExp regex = RegExp(pattern);
if (value!.isEmpty) {
return 'Email cannot be empty';
}
if (!regex.hasMatch(value)) {
return 'Enter Valid Email';
} else {
return null;
}
}
}
Output…..
10. Drop down list
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter DropDownButton example',
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MyHomePage(),
debugShowCheckedModeBanner: false,
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
_MyHomePageState createState() =>
_MyHomePageState();
}
class _MyHomePageState extends
State<MyHomePage> {
// Initial Selected Value
String dropdownvalue = 'departement';
// List of items in our dropdown menu
var items = [
'departement',
'software',
'cs',
'It',
'Is',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Flutter DropDownButton
example"),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
DropdownButton(
// Initial Value
value: dropdownvalue,
// Down Arrow Icon
icon: const Icon(Icons.keyboard_arrow_down),
// Array list of items
items: items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items),
);
}).toList(),
// After selecting the desired option,it will
// change button value to selected value
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
 });
},
),
],
),
),
);
}
}
Output…..
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'drop down list example 2',
 theme: ThemeData(
primarySwatch: Colors.blue,
textTheme: const TextTheme(
bodyText1: TextStyle(fontSize: 32),
bodyText2: TextStyle(fontSize: 32),
subtitle1: TextStyle(fontSize: 32),
),
),
debugShowCheckedModeBanner: false,
home: const DropdownListTutorial(),
);
}
}

class DropdownListTutorial extends StatefulWidget {

const DropdownListTutorial({Key? key}) : super(key:
key);
@override
_DropdownListTutorialState createState() =>
_DropdownListTutorialState();
}
class _DropdownListTutorialState extends
State<DropdownListTutorial> {
List<String> items = [
"computer science",
"IT",
"SWE",
"IS",
"cyber security",
"Artificial intellgence"
];
String currentItem = "";
@override
void initState() {
currentItem = items[0];
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
 appBar: AppBar(
title: const Text("Dropdown List in flutter
exmple"),
),
body: Center(
child: Column(
mainAxisAlignment:
MainAxisAlignment.spaceEvenly,
children: [
Container(
decoration: BoxDecoration(
color: Colors.amber,
borderRadius: BorderRadius.circular(10),
),
child: DropdownButton(
alignment: Alignment.topCenter,
borderRadius: BorderRadius.circular(8),
dropdownColor: Colors.blueAccent,
value: currentItem,
items: items
 .map<DropdownMenuItem<String>>(
(e) => DropdownMenuItem(
value: e,
child: Text(e),
alignment: Alignment.center,
),
)
.toList(),
onChanged: (String? value) => setState(
() {
if (value != null) currentItem = value;
},
),
),
),
Text(currentItem),
],
),
),
);
 }
}
Output….
11. Gradient button
import
'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
class RunMyApp extends
StatefulWidget {
const RunMyApp({super.key});

@override
State<RunMyApp> createState()
=> _RunMyAppState();
}
class _RunMyAppState extends
State<RunMyApp> {
 @override
Widget build(BuildContext
context) {
return MaterialApp(
debugShowCheckedModeBanner:
false,
theme:
ThemeData(primarySwatch:
Colors.green),
home: Scaffold(
appBar: AppBar(
title: Text('Gradient
Button'),
),
body: Center(
child: Container(
height: 44.0,
decoration:
BoxDecoration(
 gradient:
LinearGradient(
colors:
[Color.fromARGB(255, 2, 173,
102), Colors.blue])),
child:
ElevatedButton(
onPressed: () {},
style:
ElevatedButton.styleFrom(

backgroundColor:
Colors.transparent,
shadowColor:
Colors.transparent),
child:
Text('Elevated Button'),
),
),
),
 ),
);
}
}
Output…
12. Circular button
import
'package:flutter/material.dart';
void main() {
runApp(RunMyApp());
}
class RunMyApp extends
StatefulWidget {
const RunMyApp({super.key});
@override
State<RunMyApp> createState()
=> _RunMyAppState();
}
class _RunMyAppState extends
State<RunMyApp> {
 @override
Widget build(BuildContext
context) {
return MaterialApp(
debugShowCheckedModeBanner:
false,
theme:
ThemeData(primarySwatch:
Colors.green),
home: Scaffold(
appBar: AppBar(
title: Text('Gradient
Button'),
),
body: Center(
child: Container(
height: 120.0, //
height of the button
decoration:
BoxDecoration(
 shape:
BoxShape.circle, // shape makes
the circular button
gradient:
LinearGradient(// gives the
Gradient color
colors:
[Color.fromARGB(255, 2, 173,
102), Colors.blue])),
child:
ElevatedButton(
onPressed: () {},
style:
ElevatedButton.styleFrom(

backgroundColor:
Colors.transparent,
shadowColor:
Colors.transparent),
 child:
Text('Elevated Button'),
),
),
),
),
);
}
}
Output…
13. Demonstration of row and column
import
'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context)
{
 return MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
Home({super.key});
@override
Widget build(BuildContext context)
{
return Scaffold(
appBar: AppBar(
title:
const Text('Demonstration
for Column and Row Button'), // Fixed
typo
backgroundColor:
Colors.green,
),
body: Column(
 children: [
const SizedBox(height: 15),
const SizedBox(
height: 20,
child:
Text('Demonstration of Row'),
),
Row(
children: [
Card(
margin: const
EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const
EdgeInsets.all(25),
child: const Text(
'IT third year',
style:
TextStyle(color: Colors.green),
 ),
),
),
const SizedBox(width:
2),
Card(
margin: const
EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const
EdgeInsets.all(25),
child: const Text(
'IT third year',
style:
TextStyle(color: Colors.green),
),
),
),
],
 ),
const SizedBox(height: 30),
const SizedBox(
height: 20,
child:
Text('Demonstration of Column'),
),
Column(
children: [
Card(
margin: const
EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const
EdgeInsets.all(25),
child: const Text(
'IT third year',
style:
TextStyle(color: Colors.green),
 ),
),
),
const SizedBox(height:
4), // Changed from width to height
Card(
margin: const
EdgeInsets.all(10),
elevation: 8,
child: Container(
padding: const
EdgeInsets.all(25),
child: const Text(
'IT third year',
style:
TextStyle(color: Colors.green),
),
),
),
],
 )
],
),
);
}
}
Output…
14. Flutter table example
Corrections & Improvements:

✅ Renamed _TableExample to _MyAppState for clarity.

✅ Used const where applicable to improve performance.
✅ Added debugShowCheckedModeBanner: false to MaterialApp to
remove the debug banner.
✅ Ensured all Text widgets inside TableRow use a TextStyle for
consistency.

import 'package:flutter/material.dart';

void main() {

runApp(MyApp());

class MyApp extends StatefulWidget {

 @override

_TableExample createState() => _TableExample();

class _TableExample extends State<MyApp> {

@override

Widget build(BuildContext context) {

return MaterialApp(

home: Scaffold(

appBar: AppBar(

title: Text('Flutter Table Example'),

),

body: Center(

child: Column(children: <Widget>[

Container(

margin: EdgeInsets.all(20),

child: Table(

defaultColumnWidth: FixedColumnWidth(120.0),

border: TableBorder.all(

color: Colors.black, style: BorderStyle.solid, width: 2),

 children: [

TableRow(children: [

Column(children: [

Text('computer science', style: TextStyle(fontSize:

20.0))

]),

Column(children: [

Text('software', style: TextStyle(fontSize: 20.0))

]),

Column(children: [

Text('information technology',

style: TextStyle(fontSize: 20.0))

]),

]),

TableRow(children: [

Column(children: [Text('Javatpoint')]),

Column(children: [Text('Flutter')]),

Column(children: [Text('5*')]),

]),

TableRow(children: [
 Column(children: [Text('firebase')]),

Column(children: [Text('MySQL')]),

Column(children: [Text('5*')]),

]),

TableRow(children: [

Column(children: [Text('SQLlite')]),

Column(children: [Text('ReactJS')]),

Column(children: [Text('5*')]),

]),

],

),

),

]))),

);

Output……

15. Flutter table

import
'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

// MyApp as a StatefulWidget
class MyApp extends
StatefulWidget {
const MyApp({super.key});

@override
_MyAppState createState() =>
_MyAppState();
}

class _MyAppState extends

State<MyApp> {
@override
 Widget build(BuildContext
context) {
return MaterialApp(

debugShowCheckedModeBanner:
false, // Removes the debug
banner
home: Scaffold(
appBar: AppBar(
title: const
Text('Flutter DataTable
Example'),
),
body: ListView(
children: <Widget>[
const Center(
child: Padding(
padding:
EdgeInsets.all(16.0),
child: Text(
 'People-
Chart',
style:
TextStyle(fontSize: 25,
fontWeight: FontWeight.bold),
),
),
),
DataTable(
columnSpacing:
20.0,
headingRowColor:
MaterialStateColor.resolveWith(
(states) =>
Colors.grey.shade300),
border:
TableBorder.all(width: 1, color:
Colors.black54),
columns: const [
DataColumn(
 label: Text(
'ID',
style:
TextStyle(fontSize: 18,
fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(
'Name',
style:
TextStyle(fontSize: 18,
fontWeight: FontWeight.bold),
),
),
DataColumn(
label: Text(

'Profession',
 style:
TextStyle(fontSize: 18,
fontWeight: FontWeight.bold),
),
),
],
rows: const [
DataRow(cells: [

DataCell(Text('1')),

DataCell(Text('Stephen')),

DataCell(Text('Actor')),
]),
DataRow(cells: [

DataCell(Text('5')),

DataCell(Text('John')),
DataCell(Text('Student')),
]),
DataRow(cells: [

DataCell(Text('10')),

DataCell(Text('Harry')),

DataCell(Text('Leader')),
]),
DataRow(cells: [

DataCell(Text('15')),

DataCell(Text('Peter')),

DataCell(Text('Scientist')),
]),
],
 ),
],
),
),
);
}
}
Output…..
16. Flutter table 2
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
 return MaterialApp(
debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}

class HomePage extends StatelessWidget {

const HomePage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[100], //
Background color of scaffold
appBar: AppBar(
title: const Text("Flutter Table"),
backgroundColor: Colors.redAccent,
),
body: Container(
 padding: const EdgeInsets.all(15),
child: Table(
border:
TableBorder.all(width: 1, color:
Colors.black45), // Table border
children: const [
TableRow(
decoration: BoxDecoration(color:
Colors.grey),
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text("S/N",
style: TextStyle(fontWeight:
FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Name",
 style: TextStyle(fontWeight:
FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Address",
style: TextStyle(fontWeight:
FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Nation",
style: TextStyle(fontWeight:
FontWeight.bold)),
),
],
),
TableRow(
children: [
 Padding(padding: EdgeInsets.all(8.0),
child: Text("1.")),
Padding(
padding: EdgeInsets.all(8.0), child:
Text("Krishna Karki")),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Nepal, Kathmandu")),
Padding(padding: EdgeInsets.all(8.0),
child: Text("Nepal")),
],
),
TableRow(
children: [
Padding(padding: EdgeInsets.all(8.0),
child: Text("2.")),
Padding(padding: EdgeInsets.all(8.0),
child: Text("John Wick")),
Padding(
 padding: EdgeInsets.all(8.0), child:
Text("New York, USA")),
Padding(padding: EdgeInsets.all(8.0),
child: Text("USA")),
],
),
TableRow(
children: [
Padding(padding: EdgeInsets.all(8.0),
child: Text("3.")),
Padding(
padding: EdgeInsets.all(8.0), child:
Text("Fredrick May")),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Berlin, Germany")),
Padding(padding: EdgeInsets.all(8.0),
child: Text("Germany")),
],
),
 ],
),
),
);
}
}
Output…
17. Flutter table
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

class MyApp extends StatelessWidget {

const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
 debugShowCheckedModeBanner: false,
home: const HomePage(),
);
}
}

class HomePage extends StatelessWidget {

const HomePage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.blue[100], // Background
color of scaffold
appBar: AppBar(
title: const Text("Flutter Table"),
backgroundColor: Colors.redAccent,
),
body: Container(
padding: const EdgeInsets.all(15),
 child: Table(
border: TableBorder.all(width: 1, color:
Colors.black45), // Table border
children: const [
TableRow(
decoration: BoxDecoration(color:
Colors.grey),
children: [
Padding(
padding: EdgeInsets.all(8.0),
child: Text("S/N", style:
TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Name", style:
TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(8.0),
 child: Text("Address", style:
TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.all(8.0),
child: Text("Nation", style:
TextStyle(fontWeight: FontWeight.bold)),
),
],
),
TableRow(
children: [
Padding(padding: EdgeInsets.all(8.0), child:
Text("1.")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("Krishna Karki")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("Nepal, Kathmandu")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("Nepal")),
 ],
),
TableRow(
children: [
Padding(padding: EdgeInsets.all(8.0), child:
Text("2.")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("John Wick")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("New York, USA")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("USA")),
],
),
TableRow(
children: [
Padding(padding: EdgeInsets.all(8.0), child:
Text("3.")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("Fredrick May")),
 Padding(padding: EdgeInsets.all(8.0), child:
Text("Berlin, Germany")),
Padding(padding: EdgeInsets.all(8.0), child:
Text("Germany")),
],
),
],
),
),
);
}
}
Output….
Summary of Fixes & Enhancements
1. Proper Widget Naming: _DataTableExample →
_MyAppState for better readability.
2. Added const for Performance: Reduces widget
rebuilds, making the app smoother.
3. Better UI with Padding & Colors: Tables now have
improved spacing and border styling.
4. Consistent TextStyle Usage: Ensured all text inside
tables follows a uniform font size and weight.
5. Fixed Duplicate Flutter Example Issue: Now two
examples are structured properly.
Now your Flutter tables are well-optimized and
formatted correctly!