xylophone-plus.dart

import 'package:flutter/material.dart';
// simulate the import of audioplayers flutter package

void main() => runApp(const MyApp());

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  
  void playSound() {
    print('sound played!');
  }
  
  bool isItTapped = false;
  
  void thisIsTapped(int id) {
    print('key $id is tapped');
    
    if(!(id.isNaN)) {
      isItTapped = true;
    }
  }
  Widget buildKey({required Color? color, required void Function() isTapped, int flex = 1}) {
    return Expanded(
    flex: flex,
    child: TxtBtn(
    onTap: () {
      playSound();
      setState(() {
        isTapped();
      });
    },
    color: color,
    ),
    );
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    home: Scaffold(
    body: SafeArea(
    child: Column(
    children: [
      buildKey(color: Colors.green, isTapped: () => thisIsTapped(1), flex: isItTapped == true ? 2 : 1),
      buildKey(color: Colors.blue, isTapped: () => thisIsTapped(2)),
      buildKey(color: Colors.red, isTapped: () => thisIsTapped(3)),
      buildKey(color: Colors.yellow, isTapped: () => thisIsTapped(4)),
      buildKey(color: Colors.purple, isTapped: () => thisIsTapped(5)),
    ],
    ),
    ),
    ),
    );
  }
}

class TxtBtn extends StatefulWidget {
  const TxtBtn({Key? key, required this.onTap, this.color, this.child}) : super(key: key);
  
  final void Function() onTap;
  final Color? color;
  final Widget? child;

  @override
  State<TxtBtn> createState() => _TxtBtnState();
}

class _TxtBtnState extends State<TxtBtn> {
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
    onTap: widget.onTap,
    child: Container(
    color: widget.color,
    child: widget.child,
    ),
    );
  }
}