Open haythamhamed opened 1 year ago
Here is the code from the practice session on 16.11.2022:
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class Course {
final String title;
final String instructorName;
final num rating;
final String description;
const Course({
required this.title,
required this.instructorName,
required this.rating,
this.description = 'Some description',
});
}
/// List of courses to display. Typically, this would come from a database.
const List<Course> courses = [
Course(title: 'Flutter', instructorName: 'Batanov', rating: 5.5),
Course(title: 'IT Product Development', instructorName: 'Ahmed', rating: 1.2),
Course(title: 'Unit Economics', instructorName: 'Alexander', rating: 3),
];
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(primarySwatch: Colors.green),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(title)),
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
for (final course in courses) ListItem(course: course),
],
),
),
);
}
}
class ListItem extends StatelessWidget {
const ListItem({super.key, required this.course});
final Course course;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 30, vertical: 20),
child: Row(
children: [
Image.network('https://i.redd.it/sjb9ma6h170a1.png'),
Padding(
padding: const EdgeInsets.only(left: 24),
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
course.title,
style: const TextStyle(
fontSize: 36,
fontWeight: FontWeight.bold,
),
),
Text(
course.instructorName,
style: const TextStyle(fontSize: 24, color: Colors.black54),
),
Text(
'Rating: ${course.rating} of 5',
style: const TextStyle(fontSize: 18, color: Colors.black45),
),
],
),
),
],
),
);
}
}
Update: added navigation in the class on 29.11.2022:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class Course {
final String title;
final String instructorName;
final num rating;
final String description;
const Course({
required this.title,
required this.instructorName,
required this.rating,
this.description = 'Some description',
});
}
/// List of courses to display. Typically, this would come from a database.
const List<Course> courses = [
Course(
title: 'Cross-platform app Flutter Development',
instructorName: 'Batanov',
rating: 5.5,
description: 'Best course ever'),
Course(title: 'IT Product Development', instructorName: 'Ahmed', rating: 1.2),
Course(title: 'Unit Economics', instructorName: 'Alexander', rating: 3),
];
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: CoursesListScreen(),
);
}
}
class CoursesListScreen extends StatelessWidget {
const CoursesListScreen({super.key});
void gotoDetailsScreen(BuildContext ctx, Course course) {
Navigator.push(
ctx,
MaterialPageRoute(
builder: (context) => CourseDetailsScreen(course: course),
),
);
}
Widget buildItem(BuildContext ctx, int index) {
Course course = courses[index];
return ListTile(
leading: const FlutterLogo(),
title: Text(course.title),
subtitle: Text(course.instructorName),
trailing: const Icon(Icons.chevron_right),
onTap: () => gotoDetailsScreen(ctx, course),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Courses List')),
body: ListView.builder(
itemCount: courses.length,
itemBuilder: buildItem,
),
);
}
}
class CourseDetailsScreen extends StatelessWidget {
final Course course;
const CourseDetailsScreen({super.key, required this.course});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(course.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Text('Taught by ${course.instructorName}'),
Text('Rating: ${course.rating} of 5'),
Text(course.description),
ElevatedButton(
onPressed: () => Navigator.pop(context),
child: Text('Go back'),
),
],
),
),
);
}
}
Screen: 2nd | Courses Screen
User Flow: Enrol in a course![image](https://user-images.githubusercontent.com/116754104/201286447-6479336b-65f0-44c9-9452-e8dbd33eadf9.png)
Description: Courses list from the course widget
Goal: To view all the courses in the sub-category
Reference:![image](https://user-images.githubusercontent.com/116754104/201297809-d18ddf56-bb9d-4b6c-a385-6d2e350f92a7.png)