2nd | Courses Screen | Courses List

[haythamhamed]

• Screen: 2nd | Courses Screen

• User Flow: Enrol in a course

• Description: Courses list from the course widget

• Goal: To view all the courses in the sub-category

• Reference:

[aabounegm]

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),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

[aabounegm]

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'),
            ),
          ],
        ),
      ),
    );
  }
}