DecorationImage lerp demo

main.dart

import 'package:flutter/material.dart';

// Tap or click the image to transition between owls.
// The owls are DecorationImages with different settings (e.g. repeating,
// or a nine-patch center slice configuration). The AnimatedContainer
// lerps the DecorationImages so that they transition smoothly.

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Center(
        child: MyWidget(),
      ),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  static const List<DecorationImage> _images = <DecorationImage>[
    DecorationImage(
      image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg',
      ),
    ),
    DecorationImage(
      image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg',
      ),
      repeat: ImageRepeat.repeat,
    ),
    DecorationImage(
      image: NetworkImage(
        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-3.jpg',
      ),
      centerSlice: Rect.fromLTWH(60, 25, 160, 140),
    ),
  ];
  
  int _current = 0;
  
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _current += 1;
          if (_current >= _images.length) {
            _current = 0;
          }
        });
      },
      child: AnimatedContainer(
        // Curves.slowMiddle is used to emphasize that we are showing both images
        // at once in this demo. In production, a curve like Curves.easeInOut or
        // even Curves.linear may look better.
        curve: Curves.slowMiddle,
        duration: const Duration(seconds: 1),
        decoration: BoxDecoration(
          image: _images[_current],
        ),
      ),
    );
  }
}