CoolTile for Flutter

cool_tile.dart

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

class CoolTile extends StatefulWidget {
  final String title;
  final String subtitle;
  final String tag;
  final String bottomRightText;
  final List<ImageProvider> avatars;
  CoolTile({Key key, this.title = '', this.subtitle = '', this.tag = '', this.avatars, this.bottomRightText = ''})
      : super(key: key);

  @override
  _CoolTileState createState() => _CoolTileState();
}

class _CoolTileState extends State<CoolTile> {
  // generates two random different colors based on a list
  List<MaterialColor> _twoRandomColors() {
    // define your tab colors here:
    List<MaterialColor> colorsList = [
      Colors.blueGrey,
      Colors.deepOrange,
      Colors.deepPurple,
      Colors.brown,
      Colors.indigo,
      Colors.teal,
      Colors.lime,
      Colors.green,
      Colors.blue,
      Colors.lightBlue,
      Colors.purple,
      Colors.red,
      Colors.orange,
      Colors.yellow
    ];
    int indexA = Random().nextInt(colorsList.length - 1);
    int indexB;
    do {
      indexB = Random().nextInt(colorsList.length - 1);
    } while (indexA == indexB); // prevents color duplicates

    return [colorsList[indexA], colorsList[indexB]];
  }

  @override
  Widget build(BuildContext context) {
    double xAlign = 0.0;
    var twoColors = _twoRandomColors();
    var border = 8.0;
    return Stack(
      children: <Widget>[
        //body
        Container(
          height: 90.0,
          margin: EdgeInsets.symmetric(vertical: 12.0, horizontal: 25.0),
          child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(border),
              shape: BoxShape.rectangle,
              color: Colors.white,
              boxShadow: [BoxShadow(color: Colors.grey, blurRadius: 10.0, offset: Offset(0, 5.0), spreadRadius: 1.0)],
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(border),
              child: Row(
                mainAxisSize: MainAxisSize.max,
                crossAxisAlignment: CrossAxisAlignment.start,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  // Gradient bar
                  Container(
                    width: 10.0,
                    decoration: BoxDecoration(
                      gradient:
                          LinearGradient(colors: twoColors, begin: Alignment.topCenter, end: Alignment.bottomCenter),
                    ),
                  ),
                  Expanded(
                    child: Container(
                      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 5.0),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          // Title
                          Text(
                            widget.title,
                            textAlign: TextAlign.left,
                            style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
                          ),
                          // Subtitle
                          Text(
                            widget.subtitle,
                            textAlign: TextAlign.left,
                          ),
                          // avatars stack of images overlaped
                          widget.avatars == null
                              ? Container()
                              : Container(
                                  height: 32.0,
                                  child: Stack(
                                    children: <Widget>[] +
                                        widget.avatars.map(
                                          (avatar) {
                                            var x = xAlign;
                                            xAlign = xAlign + 18;
                                            return Positioned(
                                              bottom: 0,
                                              left: x,
                                              child: CircleAvatar(
                                                backgroundColor: Colors.grey,
                                                backgroundImage: avatar,
                                                maxRadius: 15.0,
                                              ),
                                            );
                                          },
                                        ).toList(),
                                  ),
                                )
                        ],
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ),
        // Tag
        Positioned(
          top: 12.0,
          right: 8.0,
          child: ClipRRect(
            borderRadius: BorderRadius.circular(20.0),
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 8.0, vertical: 6.0),
              decoration: BoxDecoration(gradient: LinearGradient(colors: twoColors)),
              child: Text(
                widget.tag,
                style: TextStyle(color: Colors.white, fontSize: 16.0),
              ),
            ),
          ),
        ),
        // bottom right text

        Positioned(
          bottom: 18.0,
          right: 34.0,
          child: Text(
            widget.bottomRightText,
            style: TextStyle(color: twoColors[0]),
          ),
        ),
      ],
    );
  }
}

main.dart

import 'package:flutter/material.dart';
import 'package:widgets/cool_tile.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        scaffoldBackgroundColor: Colors.grey[200],
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.white,
        title: Text(
          widget.title,
          style: TextStyle(color: Colors.black, fontSize: 20.0),
        ),
      ),
      body: ListView(
        children: <Widget>[
          CoolTile(
              title: 'Awesome title',
              subtitle: 'some subtitle',
              bottomRightText: 'More text',
              tag: 'the tag',
              avatars: [
                NetworkImage('http://i.pravatar.cc/150?'),
                NetworkImage('http://i.pravatar.cc/151?'),
                NetworkImage('http://i.pravatar.cc/152?')
              ]),
          CoolTile(
              title: 'Awesome title',
              subtitle: 'some subtitle',
              bottomRightText: 'More text',
              tag: 'the tag',
              avatars: [
                NetworkImage('http://i.pravatar.cc/153?'),
                NetworkImage('http://i.pravatar.cc/154?'),
                NetworkImage('http://i.pravatar.cc/155?')
              ]),
          CoolTile(
              title: 'Awesome title',
              subtitle: 'some subtitle',
              bottomRightText: 'More text',
              tag: 'the tag',
              avatars: [
                NetworkImage('http://i.pravatar.cc/156?'),
                NetworkImage('http://i.pravatar.cc/157'),
                NetworkImage('http://i.pravatar.cc/158?')
              ]),
          CoolTile(
              title: 'Awesome title',
              subtitle: 'some subtitle',
              bottomRightText: 'More text',
              tag: 'the tag',
              avatars: [
                NetworkImage('http://i.pravatar.cc/159?'),
                NetworkImage('http://i.pravatar.cc/160?'),
                NetworkImage('http://i.pravatar.cc/161?')
              ]),
        ],
      ),
      // This trailing comma makes auto-formatting nicer for build methods.
    );
  }
}