Custom Widget: Peg

on Friday, 24th of July, 2020

To start, build the Peg widget, which is mostly just a dumb widget that we'll create four of in our app. Each one will be animated separately.

This widget is built by manipulating a Container widget. It's a container widget that's designed with a specific size, color, border radius, and box shadow.

import 'package:flutter/material.dart';

class Peg extends StatelessWidget {
  final double marginLeft;
  final double marginRight;

  const Peg({Key key, this.marginLeft, this.marginRight}) : super(key: key);

  Widget build(BuildContext context) {
    return new Container(
      width: 35.0,
      height: 15.0,
      margin: new EdgeInsets.only(left: marginLeft, right: marginRight),
      decoration: new BoxDecoration(
        color: const Color.fromRGBO(0, 0, 255, 1.0),
        borderRadius: new BorderRadius.circular(10.0),
        boxShadow: [
          new BoxShadow(
            color: Colors.black12,
            blurRadius: 8.0,
            spreadRadius: 1.0,
            offset: new Offset(1.0, 0.0),
          new BoxShadow(
            color: Colors.black26,
            blurRadius: 6.0,
            spreadRadius: 1.5,
            offset: new Offset(1.0, 0.0),

The properties Peg.marginLeft and Peg.marginRight are used to position the pegs next to each other correctly. They will be discussed in more detail later in this tutorial.

Join thousands of Flutter developers.

Sign up for infrequent updates about Flutter and Dart.

You can get all this content and more in one place. Check out my new book Flutter in Action