carousel_product_images.dart

class CarouselProductImages extends StatelessWidget {
  final Product product;

  CarouselProductImages(this.product);

  @override
  Widget build(BuildContext context) {
    return CarouselSlider(
      height: (MediaQuery.of(context).size.height * 2) / 3,
      viewportFraction: 1.0,
      distortion: false,
      items: product.productImageURLs.map((image) {
        return Container(
          child: CachedNetworkImage(
            imageUrl: image,
            fit: BoxFit.cover,
            width: 1000.0,
          ),
        );
      }).toList(),
      autoPlay: true,
    );
  }
}

custom_bottom_nav.dart

class CustomBottomNav extends StatelessWidget {
  final Product product;

  const CustomBottomNav(this.product);

  @override
  Widget build(BuildContext context) {
    final snackBar = SnackBar(content: Text('Successfully Added'));
    final productDetailBloc = Provider.of<ProductDetailBloc>(context);
    return Container(
      width: MediaQuery.of(context).size.width,
      height: 50.0,
      child: Row(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: <Widget>[
          Flexible(
            fit: FlexFit.tight,
            flex: 1,
            child: RaisedButton(
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(0.0)),
              onPressed: () {},
              color: Colors.grey,
              child: Center(
                child: Text(
                  "ADD TO CART",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
          Flexible(
            flex: 1,
            child: RaisedButton(
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(0.0)),
              onPressed: () {},
              color: Colors.teal,
              child: Center(
                child: Text(
                  "BUY NOW",
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

product_detail_bloc.cart

class ProductDetailBloc extends BaseBloc {
  final JweleryKartApi kartApi;
  final String productId;

  StreamController<String> _productSize = StreamController<String>();
  StreamController<Product> _product = StreamController<Product>();
  StreamController<String> _addItemResult = StreamController<String>();

  Stream<String> get productSize => _productSize.stream;

  Stream<String> get addItemResult => _addItemResult.stream;

  Stream<Product> get product => _product.stream;

  Function(String) get changeProductSize => _productSize.sink.add;

  ProductDetailBloc(this.kartApi, this.productId) {
    _product.sink.addStream(
      Observable.fromFuture(kartApi.getProductDetail(productId))
          .asBroadcastStream(),
    );
  }

  addItemToCart(String customerContact,Product product) {
    _addItemResult.sink.addStream(
      Observable.fromFuture(kartApi.addItemToCart(
              customerContact, product))
          .asBroadcastStream(),
    );
  }

  @override
  void dispose() {
    _productSize.close();
    _product.close();
    _addItemResult.close();
  }
}

product_detail_screen.dart

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:jwelery_kart/bloc/base_provider.dart';
import 'package:jwelery_kart/bloc/product_detail_bloc.dart';
import 'package:jwelery_kart/config/application.dart';
import 'package:jwelery_kart/config/routes.dart';
import 'package:jwelery_kart/models/product.dart';
import 'package:jwelery_kart/pages/productdetail/carousel_product_images.dart';
import 'package:jwelery_kart/pages/productdetail/custom_bottom_nav.dart';
import 'package:jwelery_kart/utils/dialog_utils.dart';
import 'package:jwelery_kart/utils/jwelery_kart_api.dart';
import 'package:jwelery_kart/pages/productdetail/shopping_action_widget.dart';
import 'package:jwelery_kart/widgets/description_text_widget.dart';

class ProductDetailScreen extends StatelessWidget {
  final String productId;

  const ProductDetailScreen({this.productId});

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return BlocProvider<ProductDetailBloc>(
      builder: (_, bloc) =>
          bloc ?? ProductDetailBloc(JweleryKartApi(), productId),
      onDispose: (_, bloc) => bloc.dispose(),
      child: RootApp(),
    );
  }
}

class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final productDetailBloc = Provider.of<ProductDetailBloc>(context);
    return Container(
      color: Colors.white,
      child: StreamBuilder(
          stream: productDetailBloc.product,
          builder: (BuildContext context, AsyncSnapshot<Product> snapshot) {
            if (snapshot.hasData) {
              return Scaffold(
                body: CustomScrollView(
                  slivers: <Widget>[
                    SliverAppBar(
                      actions: <Widget>[
                        IconButton(
                            splashColor: Colors.yellow,
                            icon: Icon(
                              Icons.shopping_cart,
                              color: Colors.white,
                            ),
                            onPressed: () {
                              Application.router.navigateTo(
                                context,
                                Routes.cartList,
                              );
                            }),
                      ],
                      pinned: true,
                      expandedHeight:
                          ((MediaQuery.of(context).size.height * 2) / 3) - 24.0,
                      flexibleSpace: FlexibleSpaceBar(
                        background: Container(
                            color: Colors.white,
                            child: CarouselProductImages(snapshot.data)),
                      ),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                snapshot.data.productName,
                                style: TextStyle(
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.w500,
                                  color: Colors.blueGrey[700],
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              SizedBox(
                                height: 5.0,
                              ),
                              Text(
                                "₹" + snapshot.data.productPrice,
                                style: TextStyle(
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.w700,
                                  color: Colors.teal,
                                ),
                              ),
                              SizedBox(height: 2.0),
                              Text(
                                "(Inclusive of all Taxes)",
                                style: TextStyle(
                                  fontWeight: FontWeight.w300,
                                  color: Colors.blueGrey[700],
                                ),
                              )
                            ],
                          ),
                        ),
                      ),
                    ),
                    SliverPadding(
                      padding: EdgeInsets.all(4.0),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "About this Product",
                                style: TextStyle(
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.w500,
                                  color: Colors.blueGrey[700],
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              SizedBox(
                                height: 5.0,
                              ),
                              DescriptionTextWidget(
                                text:
                                    "Simple in design yet sophisticated in concept,"
                                    "this floral ring worth admiring. Featuring fine adornment of sheeny cz,"
                                    "this ring depicts glow. Just wear it on special occasions and no doubt you will be the center of attraction.",
                              ),
                            ],
                          ),
                        ),
                      ),
                    ),
                    SliverPadding(
                      padding: EdgeInsets.all(4.0),
                    ),
                    SliverToBoxAdapter(
                      child: Container(
                        color: Colors.white,
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                "Available Sizes",
                                style: TextStyle(
                                  fontSize: 24.0,
                                  fontWeight: FontWeight.w500,
                                  color: Colors.blueGrey[700],
                                ),
                                maxLines: 1,
                                overflow: TextOverflow.ellipsis,
                              ),
                              SizedBox(
                                height: 5.0,
                              ),
                              ShoppingActionWidget(snapshot.data)
                            ],
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                bottomNavigationBar: CustomBottomNav(snapshot.data),
              );
            } else if (snapshot.hasError) {
              return Center(
                child: Text("Some Error..."),
              );
            } else
              return Center(
                child: DialogUtils.showCircularProgressBar(),
              );
          }),
    );
  }
}

shopping_action_widget.dart

class ShoppingActionWidget extends StatelessWidget {
  final Product product;

  ShoppingActionWidget(this.product);

  @override
  Widget build(BuildContext context) {
    final productDetailBloc = Provider.of<ProductDetailBloc>(context);
    return StreamBuilder(
        stream: productDetailBloc.productSize,
        builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
          return Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Wrap(
                alignment: WrapAlignment.spaceEvenly,
                children: product.productSize
                    .map((size) => Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: ChoiceChip(
                              backgroundColor: Colors.grey,
                              selectedColor: Colors.teal,
                              label: Text(
                                size,
                                style: TextStyle(
                                    color: Colors.white,
                                    fontWeight: FontWeight.bold),
                              ),
                              selected: snapshot.data == size,
                              onSelected: (selected) {
                                productDetailBloc.changeProductSize(size);
                              }),
                        ))
                    .toList(),
              ),
            ],
          );
        });
  }
}