fading_visibility 0.1.0

Animates visibility of a widget using fade animation.

example/lib/main.dart

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

void main() {
  runApp(MaterialApp(home: _Page()));
}

enum _Subpage { one, two, three }

class _Page extends StatefulWidget {
  const _Page();

  @override
  State<_Page> createState() => _PageState();
}

class _PageState extends State<_Page> {
  _Subpage _currentSubpage = _Subpage.one;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('AnimatedFadeVisibility example')),
      body: Stack(
        children: _Subpage.values
            .map(
              (e) => FadingVisibility(
                visible: e == _currentSubpage,
                maintainState: true,
                duration: Duration(seconds: 2),
                child: switch (e) {
                  _Subpage.one => _Body1(),
                  _Subpage.two => _Body2(),
                  _Subpage.three => _Body3(),
                },
              ),
            )
            .toList(),
      ),
      bottomNavigationBar: NavigationBar(
          selectedIndex: _currentSubpage.index,
          onDestinationSelected: (i) =>
              setState(() => _currentSubpage = _Subpage.values[i]),
          destinations: _Subpage.values
              .map(
                (e) => NavigationDestination(
                  icon: Icon(e.icon),
                  label: e.name,
                ),
              )
              .toList()),
    );
  }
}

extension on _Subpage {
  IconData get icon => switch (this) {
        _Subpage.one => Icons.flutter_dash,
        _Subpage.two => Icons.color_lens,
        _Subpage.three => Icons.music_note,
      };
}

final _iconSize = 200.0;

class _Body1 extends StatelessWidget {
  const _Body1();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Icon(_Subpage.one.icon, size: _iconSize),
            Text('The text field proves that state is maintained'),
            SizedBox(
              width: 200,
              child: TextField(),
            ),
          ],
        ),
      ),
    );
  }
}

class _Body2 extends StatelessWidget {
  const _Body2();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Center(
        child: Icon(_Subpage.two.icon, size: _iconSize),
      ),
    );
  }
}

class _Body3 extends StatelessWidget {
  const _Body3();

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.yellow,
      child: Center(
        child: Icon(_Subpage.three.icon, size: _iconSize),
      ),
    );
  }
}