CPMD 202203103510252
PRACTICAL - 5
Aim : Develop a flutter app with custom widget to display your Enrollment
number, Name, and Photo. Your image should be display in circular shape. Also
display your hobbies with chip widgets.
Code :
1. Main.Dart:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Profile Example',
debugShowCheckedModeBanner: false,
home: ProfilePage(),
);
}
}
class ProfilePage extends StatelessWidget {
final String enrollmentNumber = '202203103510252';
final String name = 'Shruti Patel';
final String photoUrl = 'assets/profile.jpg';
final List<String> hobbies = ['Movie', 'Reading', 'Music'];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Profile Page'),
),
body: Center(
child: ProfileWidget(
enrollmentNumber: enrollmentNumber,
name: name,
photoUrl: photoUrl,
hobbies: hobbies,
),
),
);
}
}
CPMD 202203103510252
class ProfileWidget extends StatelessWidget {
final String enrollmentNumber;
final String name;
final String photoUrl;
final List<String> hobbies;
ProfileWidget({
required this.enrollmentNumber,
required this.name,
required this.photoUrl,
required this.hobbies,
});
@override
Widget build(BuildContext context) {
return Card(
elevation: 10,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// Circular photo
CircleAvatar(
radius: 60, // Radius for circular image
backgroundImage: NetworkImage(photoUrl),
),
SizedBox(height: 20),
// Enrollment number and Name
Column(
children: [
Text(
'Enrollment Number: $enrollmentNumber',
style: TextStyle(fontSize: 18),
),
Text(
'Name: $name',
style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
),
],
),
SizedBox(height: 20),
// Hobbies with Chip widgets
Wrap(
spacing: 8.0, // Space between chips
children: hobbies
.map((hobby) => Chip(
label: Text(hobby),
backgroundColor: Colors.blue[100],
CPMD 202203103510252
))
.toList(),
),
],
),
),
);
}
}
2. Pubspec.yaml:
name: practical5
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.16.2 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
flutter:
uses-material-design: true
assets:
- assets/profile.jpg
OUTPUT :
CPMD 202203103510252
PRACTICAL - 6
Aim : Develop a flutter app with custom widget to display your Enrollment
number, Name, and Photo. Your image should be display in circular shape. Also
display your hobbies with chip widgets.
Code :
1. Main.dart
import 'package:flutter/material.dart';
import 'data.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Practical 6',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SemesterDivisionListScreen(),
);
}
}
class SemesterDivisionListScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Semester Divisions'),
),
body: ListView.separated(
itemCount: semesterDivisions.length,
separatorBuilder: (context, index) => Divider(),
itemBuilder: (context, index) {
final division = semesterDivisions[index];
return ListTile(
title: Text(division.name),
onTap: () {
Navigator.push(
context,
CPMD 202203103510252
MaterialPageRoute(
builder: (context) => StudentListScreen(division: division),
),
);
},
);
},
),
);
}
}
class StudentListScreen extends StatelessWidget {
final SemesterDivision division;
StudentListScreen({required this.division});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(division.name),
),
body: ListView.builder(
itemCount: division.students.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(division.students[index]),
);
},
),
);
}
2. Data.dart
class SemesterDivision {
final String name;
final List<String> students;
SemesterDivision(this.name, this.students);
}
final List<SemesterDivision> semesterDivisions = [
SemesterDivision('Semester 1 - Division A', ['krishna', 'radha', 'rukmani']),
SemesterDivision('Semester 1 - Division B', ['Devid', 'Eve', 'Frank']),
SemesterDivision('Semester 2 - Division A', ['shiva', 'Hank', 'Ivy']),
SemesterDivision('Semester 1 - Division B', ['Jack', 'Karen', 'Leo']),
SemesterDivision('Semester 3 - Division A', ['iva', 'ankit', 'anika']),
CPMD 202203103510252
SemesterDivision('Semester 3 - Division B', ['Jasy', 'Ketan', 'Liza']),
];
Output:
CPMD 202203103510252
PRACTICAL - 7
Aim : Develop a flutter app to display images of images of at least 10 products
using GridView.
Code :
1.Main.dart
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Product Grid',
theme: ThemeData(
primarySwatch: Colors.blue,
),
debugShowCheckedModeBanner: false,
home: ProductGridScreen(),
);
}
}
class ProductGridScreen extends StatelessWidget {
final List<String> productImages = [
'assets/images/product1.jpg',
'assets/images/product2.jpeg',
'assets/images/product3.webp',
'assets/images/product4.jpg',
'assets/images/product5.jpg',
'assets/images/product6.jpeg',
'assets/images/product7.jpg',
'assets/images/product8.jpg',
'assets/images/product9.jpg',
'assets/images/product10.jpg',
];
@override
Widget build(BuildContext context) {
return Scaffold(
CPMD 202203103510252
appBar: AppBar(
title: Text('Product Grid'),
),
body: GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 5, // Number of columns
crossAxisSpacing: 5.0,
mainAxisSpacing: 5.0,
),
itemCount: productImages.length,
itemBuilder: (context, index) {
return Card(
child: GridTile(
child: Image.asset(productImages[index], fit: BoxFit.cover),
),
);
},
padding: const EdgeInsets.all(5),
),
);
}
}
2.pubspec.yaml:
name: practical7
description: "A new Flutter project."
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: '>=3.4.3 <4.0.0'
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.6
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^3.0.0
flutter:
uses-material-design: true
assets:
- assets/images/product1.jpg
- assets/images/product2.jpeg
- assets/images/product3.webp
CPMD 202203103510252
- assets/images/product4.jpg
- assets/images/product5.jpg
- assets/images/product6.jpeg
- assets/images/product7.jpg
- assets/images/product8.jpg
- assets/images/product9.jpg
- assets/images/product10.jpg
Output:
CPMD 202203103510252
PRACTICAL - 8
Aim : Develop flutter app with a Text, a TextField, and an ElevatedButton
displaying text “Save”. Display the greetings message in Text widget by
retrieving username from shared preference. On tap of the ElevatedButton, save
the username (from TextField) in shared preference.
Code :
1.Main.dart:
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
TextEditingController _usernameController = TextEditingController();
String _greetingMessage = "Hello, User!";
@override
void initState() {
super.initState();
_loadUsername();
}
// Load the saved username from shared preferences
void _loadUsername() async {
CPMD 202203103510252
SharedPreferences prefs = await SharedPreferences.getInstance();
String? username = prefs.getString('username');
setState(() {
_greetingMessage = username != null ? "Hello, $username!" : "Hello, User!";
});
}
// Save the username to shared preferences
void _saveUsername() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
String username = _usernameController.text;
if (username.isNotEmpty) {
await prefs.setString('username', username);
setState(() {
_greetingMessage = "Hello, $username!";
_usernameController.clear(); // Clear the TextField
});
}
}
// Reset the username in shared preferences and update the greeting message
void _resetUsername() async {
SharedPreferences prefs = await SharedPreferences.getInstance();
await prefs.remove('username');
setState(() {
_greetingMessage = "Hello, User!";
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Practical 8'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
_greetingMessage,
style: const TextStyle(fontSize: 24),
),
const SizedBox(height: 20),
TextField(
CPMD 202203103510252
controller: _usernameController,
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: 'Enter your username',
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _saveUsername,
child: const Text('Save'),
),
const SizedBox(height: 10),
ElevatedButton(
onPressed: _resetUsername,
child: const Text('Reset'),
),
],
),
),
);
}
}
2.pubspec.yaml:
name: practical8
description: A new Flutter project.
publish_to: 'none'
version: 1.0.0+1
environment:
sdk: ">=2.16.2 <3.0.0"
dependencies:
flutter:
sdk: flutter
cupertino_icons: ^1.0.2
shared_preferences: ^2.0.15
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^1.0.0
flutter:
uses-material-design: true
CPMD 202203103510252
Output:
