Lists and Banners

DashboardScreen.dart

import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:marquee/marquee.dart';
import 'package:verto_india/model/BrandsByCategoryModel.dart';
import 'package:verto_india/utils/AppColors.dart';
import 'package:verto_india/utils/Lang.dart';

class DashboardScreen extends StatefulWidget {
  @override
  _DashboardScreen createState() => _DashboardScreen();
}

class _DashboardScreen extends State<DashboardScreen>
    with SingleTickerProviderStateMixin {
  int _current = 0;
  AnimationController _animationController;
  bool isPlaying = false;
  int quickActionLength = 8;
  List<BrandsByCategoryModel> brandsByCatList = List();

  @override
  void initState() {
    super.initState();
    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 800));
    List<BrandsByCategoryNodeModel> list1 = List();
    list1.add(BrandsByCategoryNodeModel('Flipkart', FontAwesomeIcons.flickr));
    list1.add(BrandsByCategoryNodeModel('eBay', FontAwesomeIcons.bitcoin));
    list1.add(BrandsByCategoryNodeModel('Facebook', FontAwesomeIcons.facebook));
    list1.add(BrandsByCategoryNodeModel('Amazon', FontAwesomeIcons.amazon));
    list1.add(BrandsByCategoryNodeModel('Gitlab', FontAwesomeIcons.gitlab));
    list1.add(BrandsByCategoryNodeModel('Flipkart', FontAwesomeIcons.flickr));
    list1.add(BrandsByCategoryNodeModel('eBay', FontAwesomeIcons.paypal));
    list1.add(BrandsByCategoryNodeModel('Facebook', FontAwesomeIcons.facebook));
    list1.add(BrandsByCategoryNodeModel('Amazon', FontAwesomeIcons.amazon));
    list1.add(BrandsByCategoryNodeModel('Gitlab', FontAwesomeIcons.gitlab));
    List<BrandsByCategoryNodeModel> list2 = List();
    list2.add(BrandsByCategoryNodeModel('Flipkart', FontAwesomeIcons.flickr));
    list2.add(BrandsByCategoryNodeModel('eBay', FontAwesomeIcons.twitter));
    list2.add(BrandsByCategoryNodeModel('Facebook', FontAwesomeIcons.facebook));
    list2.add(BrandsByCategoryNodeModel('Amazon', FontAwesomeIcons.amazon));
    list2.add(BrandsByCategoryNodeModel('Gitlab', FontAwesomeIcons.gitlab));
    List<BrandsByCategoryNodeModel> list3 = List();
    list3.add(BrandsByCategoryNodeModel('Flipkart', FontAwesomeIcons.flickr));
    list3.add(BrandsByCategoryNodeModel('eBay', FontAwesomeIcons.wordpress));
    list3.add(BrandsByCategoryNodeModel('Facebook', FontAwesomeIcons.facebook));
    list3.add(BrandsByCategoryNodeModel('Amazon', FontAwesomeIcons.amazon));
    list3.add(BrandsByCategoryNodeModel('Gitlab', FontAwesomeIcons.gitlab));
    brandsByCatList.add(BrandsByCategoryModel('Shopping', list1));
    brandsByCatList.add(BrandsByCategoryModel('Utility', list2));
    brandsByCatList.add(BrandsByCategoryModel('Travel', list3));
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      child: Container(
          child: Column(
        children: <Widget>[
          marquee(),
          slider1(),
          quickAction(),
          slider2(),
          brandsByCategory(),
        ],
      )),
    );
  }

  List child = map<Widget>(
    imgList,
    (index, i) {
      return Container(
        margin: EdgeInsets.all(5.0),
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(5.0)),
          child: Stack(children: <Widget>[
            Image.network(i, fit: BoxFit.cover, width: 1000.0),
            Positioned(
              bottom: 0.0,
              left: 0.0,
              right: 0.0,
              child: Container(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    colors: [
                      Color.fromARGB(200, 0, 0, 0),
                      Color.fromARGB(0, 0, 0, 0)
                    ],
                    begin: Alignment.bottomCenter,
                    end: Alignment.topCenter,
                  ),
                ),
                padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0),
                child: Text(
//                  'No. $index image',
                  '',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                  ),
                ),
              ),
            ),
          ]),
        ),
      );
    },
  ).toList();

  Widget marquee() {
    return Container(
      height: 30,
      padding: EdgeInsets.all(8),
      color: AppColors.themeColorSecondary.shade50,
      width: MediaQuery.of(context).size.width,
      child: (Marquee(
        text: 'Some sample text that takes some space.',
        scrollAxis: Axis.horizontal,
        crossAxisAlignment: CrossAxisAlignment.center,
        blankSpace: 20.0,
        velocity: 50.0,
        pauseAfterRound: Duration(seconds: 1),
        startPadding: 10.0,
        accelerationDuration: Duration(seconds: 1),
        accelerationCurve: Curves.linear,
        decelerationDuration: Duration(milliseconds: 500),
        decelerationCurve: Curves.easeOut,
      )),
    );
  }

  Widget slider1() {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        CarouselSlider(
          items: child,
          autoPlay: false,
          enlargeCenterPage: false,
          aspectRatio: 2.8,
          onPageChanged: (index) {
            setState(() {
              _current = index;
            });
          },
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: map<Widget>(
            imgList,
            (index, url) {
              return Container(
                  width: 8.0,
                  height: 8.0,
                  margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _current == index
                        ? Theme.of(context).colorScheme.primary
                        : Theme.of(context).colorScheme.onPrimary,
                  ));
            },
          ),
        ),
      ],
    );
  }

  Widget slider2() {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: <Widget>[
        CarouselSlider(
          items: child,
          autoPlay: false,
          enlargeCenterPage: false,
          aspectRatio: 2.0,
          onPageChanged: (index) {
            setState(() {
              _current = index;
            });
          },
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: map<Widget>(
            imgList,
            (index, url) {
              return Container(
                  width: 8.0,
                  height: 8.0,
                  margin: EdgeInsets.symmetric(vertical: 20.0, horizontal: 2.0),
                  decoration: BoxDecoration(
                    shape: BoxShape.circle,
                    color: _current == index
                        ? Theme.of(context).colorScheme.primary
                        : Theme.of(context).colorScheme.onPrimary,
                  ));
            },
          ),
        ),
      ],
    );
  }

  Widget quickAction() {
    return Card(
      child: Container(
        padding: EdgeInsets.only(top: 8, left: 8, right: 8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.only(bottom: 8.0),
              child: Text(Lang.quickAction,
                  style: Theme.of(context).textTheme.subtitle),
            ),
            AnimatedContainer(
              duration: Duration(seconds: 550),
              width: MediaQuery.of(context).size.width,
              child: GridView.count(
                physics: NeverScrollableScrollPhysics(),
                scrollDirection: Axis.vertical,
                shrinkWrap: true,
                crossAxisCount: 4,
                childAspectRatio: 1 / 1.1,
                mainAxisSpacing: 8.0,
                crossAxisSpacing: 8.0,
                children: List.generate(quickActionLength, (index) {
                  return InkWell(
                    child: Center(
                      child: Container(
                        child: Container(
                          decoration: BoxDecoration(
                              color: Theme.of(context).colorScheme.primary,
                              borderRadius: BorderRadius.circular(16)),
                          child: Container(
                            height: MediaQuery.of(context).size.height,
                            width: MediaQuery.of(context).size.width,
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.center,
                              mainAxisSize: MainAxisSize.max,
                              children: <Widget>[
                                Icon(
                                  FontAwesomeIcons.mobileAlt,
                                  size: 40,
                                ),
                                Padding(padding: EdgeInsets.only(top: 4)),
                                Container(
                                  alignment: Alignment.center,
                                  padding: EdgeInsets.all(4),
                                  child: Text(
                                    'Mobile Recharge',
                                    style: Theme.of(context)
                                        .textTheme
                                        .overline
                                        .copyWith(color: AppColors.colorWhite),
                                    textAlign: TextAlign.center,
                                  ),
                                )
                              ],
                            ),
                          ),
                        ),
                      ),
                    ),
                  );
                }),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: 8)),
            Divider(
              color: AppColors.colorHint,
              height: 0,
            ),
            InkWell(
              onTap: () {
                _handleOnPressed();
                setState(() {
                  if (quickActionLength == 8)
                    quickActionLength = 12;
                  else
                    quickActionLength = 8;
                });
              },
              child: Container(
                padding: EdgeInsets.only(top: 8, bottom: 8),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      isPlaying ? Lang.less : Lang.more,
                      style: Theme.of(context)
                          .textTheme
                          .body1
                          .copyWith(color: AppColors.colorHint),
                    ),
                    Icon(
                      isPlaying ? Icons.arrow_drop_up : Icons.arrow_drop_down,
                      color: AppColors.colorHint,
                    )
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  void _handleOnPressed() {
    setState(() {
      isPlaying = !isPlaying;
      isPlaying
          ? _animationController.forward()
          : _animationController.reverse();
    });
  }

  brandsByCategory() {
    return ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      scrollDirection: Axis.vertical,
      shrinkWrap: true,
      // Let the ListView know how many items it needs to build.
      itemCount: brandsByCatList.length,
      // Provide a builder function. This is where the magic happens.
      // Convert each item into a widget based on the type of item it is.
      itemBuilder: (context, index) {
        final parent = brandsByCatList[index];
        return Card(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Padding(
                padding: EdgeInsets.only(top: 8, left: 8),
                child: Text(
                  '${parent.catTtitle}',
                  style: Theme.of(context).textTheme.subtitle,
                ),
              ),
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                      fit: BoxFit.cover,
                      image: NetworkImage('Path to your image')),
                  borderRadius: BorderRadius.all(Radius.circular(8.0)),
                ),
                height: 150,
                child: ListView.builder(
                  scrollDirection: Axis.horizontal,
                  shrinkWrap: true,
                  // Let the ListView know how many items it needs to build.
                  itemCount: parent.list.length,
                  // Provide a builder function. This is where the magic happens.
                  // Convert each item into a widget based on the type of item it is.
                  itemBuilder: (context, index) {
                    final child = parent.list[index];
                    return Container(
                      margin: EdgeInsets.only(left: 8, right: 8),
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.center,
                        mainAxisSize: MainAxisSize.max,
                        children: <Widget>[
                          Icon(
                            child.icon,
                            color: Colors.blue.shade200,
                            size: 100,
                          ),
                          Padding(padding: EdgeInsets.only(top: 16)),
                          Text(child.brandTitle,
                              style: Theme.of(context).textTheme.body1),
                        ],
                      ),
                    );
                  },
                ),
              )
            ],
          ),
        );
      },
    );
  }
}

List<T> map<T>(List list, Function handler) {
  List<T> result = [];
  for (var i = 0; i < list.length; i++) {
    result.add(handler(i, list[i]));
  }

  return result;
}

final List<String> imgList = [
  'https://images.unsplash.com/photo-1520342868574-5fa3804e551c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=6ff92caffcdd63681a35134a6770ed3b&auto=format&fit=crop&w=1951&q=80',
  'https://images.unsplash.com/photo-1522205408450-add114ad53fe?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=368f45b0888aeb0b7b08e3a1084d3ede&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1519125323398-675f0ddb6308?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=94a1e718d89ca60a6337a6008341ca50&auto=format&fit=crop&w=1950&q=80',
  'https://images.unsplash.com/photo-1523205771623-e0faa4d2813d?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=89719a0d55dd05e2deae4120227e6efc&auto=format&fit=crop&w=1953&q=80',
  'https://images.unsplash.com/photo-1508704019882-f9cf40e475b4?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c6e5e3aba713b17aa1fe71ab4f0ae5b&auto=format&fit=crop&w=1352&q=80',
  'https://images.unsplash.com/photo-1519985176271-adb1088fa94c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=a0c8d632e977f94e5d312d9893258f59&auto=format&fit=crop&w=1355&q=80'
];

The Packages, I cant find.

Find complete source code in VertoIndia