EP.23 Rating Bar Using Flutter

January 24, 2022

Overview

Today we look at rating bar library to build a rating page UI using Flutter

Source Code

import 'package:flutter/material.dart';
import 'package:flutter_rating_bar/flutter_rating_bar.dart';

class ReviewRating extends StatelessWidget {
  const ReviewRating({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xfff494B83),
      appBar: AppBar(
        title: const Text(
          "Quick Review",
          style: TextStyle(color: Colors.white, fontSize: 24),
        ),
        backgroundColor: Color(0xfff494B83),
        shadowColor: Colors.transparent,
      ),
      body: SizedBox(
        width: MediaQuery.of(context).size.width,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            const SizedBox(
              height: 70,
            ),
            const CircleAvatar(
              backgroundColor: Colors.amber,
              radius: 60,
              backgroundImage: NetworkImage(
                  'https://images.unsplash.com/photo-1539571696357-5a69c17a67c6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=987&q=80'),
            ),
            const SizedBox(
              height: 8,
            ),
            const Text(
              "John Snow",
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
            const Spacer(),
            const Text(
              "How was your delivery?",
              style: TextStyle(color: Colors.white, fontSize: 25),
            ),
            const SizedBox(
              height: 12,
            ),
            RatingBar.builder(
              initialRating: 3,
              minRating: 1,
              direction: Axis.horizontal,
              allowHalfRating: true,
              itemCount: 5,
              itemSize: 50,
              itemPadding: const EdgeInsets.symmetric(horizontal: 8),
              itemBuilder: (context, _) => const Icon(
                Icons.star,
                color: Colors.amber,
              ),
              onRatingUpdate: (rating) {},
            ),
            const Spacer(),
            Container(
              alignment: Alignment.center,
              width: MediaQuery.of(context).size.width / 1.75,
              height: 55,
              decoration: BoxDecoration(
                color: Color(0xfff282A5A),
                borderRadius: BorderRadius.circular(30),
              ),
              child: const Text(
                "Submit",
                style: TextStyle(
                    color: Colors.white,
                    fontSize: 22,
                    fontWeight: FontWeight.bold),
              ),
            ),
            const SizedBox(
              height: 75,
            )
          ],
        ),
      ),
    );
  }
}