IBRAHIM AHMAD
231571
LAB 5 & 6
[Date]
Widgets
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Widgets Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: WidgetDemo(),
);
class WidgetDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Widgets Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Hello, Flutter!',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
),
SizedBox(height: 16),
ElevatedButton(
onPressed: () {
print('Button Pressed!');
},
child: Text('Press Me'),
),
SizedBox(height: 16),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Icon(Icons.star, color: Colors.yellow, size: 40),
Icon(Icons.favorite, color: Colors.red, size: 40),
Icon(Icons.thumb_up, color: Colors.blue, size: 40),
],
),
SizedBox(height: 16),
Image.network(
'https://flutter.dev/images/flutter-logo-sharing.png',
height: 100,
width: 100,
),
SizedBox(height: 16),
Switch(
value: true,
onChanged: (bool value) {
// Handle switch toggle here
},
),
],
),
),
);
}
Grid lines
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Grid List Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: GridListDemo(),
);
class GridListDemo extends StatelessWidget {
final List<String> gridItems = [
'Item 1',
'Item 2',
'Item 3',
'Item 4',
'Item 5',
'Item 6',
];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Grid List Demo'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2, // Number of items per row
crossAxisSpacing: 10, // Space between items horizontally
mainAxisSpacing: 10, // Space between items vertically
),
itemCount: gridItems.length,
itemBuilder: (context, index) {
return Card(
elevation: 5,
child: Center(
child: Text(
gridItems[index],
style: TextStyle(fontSize: 18),
),
),
);
},
),
),
);
Flutter Navigation and Routing
Code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Navigation Example',
home: FirstRoute(),
);
class FirstRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('First Route')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => SecondRoute()),
);
},
child: Text('Go to Second Route'),
),
),
);
}
class SecondRoute extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Second Route')),
body: Center(
child: ElevatedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('Back to First Route'),
),
),
);
App
