grid with fade

main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      debugShowCheckedModeBanner: false,
      home: PreferenceWizard(),
    );
  }
}


class PreferenceWizard extends StatefulWidget {
  PreferenceWizard({Key? key}) : super(key: key);

  @override
  State<PreferenceWizard> createState() => _PreferenceWizardState();
}

class _PreferenceWizardState extends State<PreferenceWizard> {
  /// A widget that shows a Title, body text, and a grid of cards with a title and link text. 
  /// when a card is tapped it show a new grid in the same place as the initial grid with a new set of cards.
  
  var currentCardLevel = 0;
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Preference Wizard'),
      ),
      body: Column(
        children:  <Widget>[
          TitleText(),
          BodyText(),
          if(currentCardLevel > 0) 
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[
              IconButton(
                onPressed: () {
                  setState(() {
                    currentCardLevel--;
                  });
                },
                icon: const Icon(Icons.arrow_back),
              ),
            ],
          ),
          SizedBox(
            height: 500,
            child: AnimatedSwitcher(
            duration: const Duration(milliseconds: 500),
            transitionBuilder: (child, animation) {
              // fade to white then fade to the new widget
              return FadeTransition(
                opacity: animation.drive(Tween(begin: 1.0, end: 1.0)),
                child: FadeTransition(
                  opacity: Tween<double>(begin: 0.0, end: 1.0).animate(animation),
                  child: child,
                ),
              );
            },
            child: CardGrid(
              key: ValueKey(currentCardLevel),
              level: currentCardLevel,
              onCardTap: (card) {
                setState(() {
                  currentCardLevel++;
                });
              },
            ),
          ),),
          
        ],
      ),
    );
  }
  
}

class TitleText extends StatelessWidget {
  const TitleText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Text(
      'Welcome to the Preference Wizard',
      style: TextStyle(
        fontSize: 24,
        fontWeight: FontWeight.bold,
      ),
    );
  }
}

class BodyText extends StatelessWidget {
  const BodyText({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Text(
      'Please select your preferences',
      style: TextStyle(
        fontSize: 18,
      ),
    );
  }
}


class CardGrid extends StatelessWidget {
  final int level;
  final void Function(String) onCardTap;

  final Map<int, List<String>> cardData = {
    0: ['Card 0', 'Card 1', 'Card 2', 'Card 3'],
    1: ['Card 4', 'Card 5', 'Card 6', 'Card 7'],
    2: ['Card 8', 'Card 9', 'Card 10', 'Card 11'],
    3: ['Card 12', 'Card 13', 'Card 14', 'Card 15'],
  };

   CardGrid({Key? key, required this.level, required this.onCardTap}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return GridView.count(
      crossAxisCount: 2,
      childAspectRatio: 400/100,
      children: cardData[level]!.map((card) {
        return Card(
          color: Colors.white,
          
          child: InkWell(
            onTap: () {
              onCardTap(card);
            },
            child: Center(
              child: Text(
                card,
                style: const TextStyle(
                  fontSize: 24,
                ),
              ),
            ),
          ),
        );
      }).toList(),
    );
  }
}