Flutter stateless widget blog: Step 3 - Use AnimatedContainer to use a Stateless Widget

main.dart

import 'package:flutter/material.dart';

const kSelectedColor = Colors.blueAccent;
const kUnselectedColor = Colors.transparent;
const kSelectedShadowOffset = Offset(0.0, 4.0);
final kSelectedBorderRadius = BorderRadius.circular(32.0);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light(),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: RootStatefulWidget(),
        ),
      ),
    );
  }
}

class RootStatefulWidget extends StatefulWidget {
  @override
  _RootState createState() => _RootState();
}

class _RootState extends State<RootStatefulWidget> {
  bool _isSelected = false;

  @override
  Widget build(BuildContext context) {
    return AnimatedContainerExample(
      isSelected: _isSelected,
      onSelectionChanged: () {
        setState(() {
          _isSelected = !_isSelected;
        });
      },
    );
  }
}

class AnimatedContainerExample extends StatelessWidget {
  final bool isSelected;
  final Function onSelectionChanged;

  AnimatedContainerExample(
      {@required this.isSelected, @required this.onSelectionChanged});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: onSelectionChanged,
      child: AnimatedContainer(
        width: 200,
        height: 200,
        alignment: Alignment.center,
        decoration: BoxDecoration(
            color: isSelected ? kSelectedColor.withAlpha(32) : kUnselectedColor,
            borderRadius: BorderRadius.circular(32),
            boxShadow: isSelected
                ? <BoxShadow>[
                    BoxShadow(
                        color: kSelectedColor.withOpacity(0.2),
                        blurRadius: 8.0,
                        offset: kSelectedShadowOffset)
                  ]
                : []),
        duration: Duration(milliseconds: 350),
        curve: Curves.easeInOut,
        child: Text(
          "Content",
          style: Theme.of(context)
              .textTheme
              .headline6
              .copyWith(color: kSelectedColor),
        ),
      ),
    );
  }
}