how to move buttons to a new row automatically when space is finished in flutter?

Question

I am building an app where user is asked a question and an audio is player then the user selects the option he thinks is the correct one. i am having two problems here

1. i want to for the user when he taps the play button the icon changes to play and when ever the audio stops the play button come back to normal like in messanger apps.
2. the options button i will be having are too many that cannot fit in a single row so what i want is for the options to move to a new row after showing 5 or 6 button in each row. Any ideas for these two Questions.

this is my Question files:

    // ignore_for_file: prefer_const_constructors, file_names, non_constant_identifier_names

import 'package:audioplayers/audioplayers.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_tts/flutter_tts.dart';

    

import '../../utilities/button.dart';
import '../../utilities/buttonTapped.dart';
import '../../utilities/playbutton.dart';
import '../../utilities/playbutton.dart';

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

  @override
  State<Q7sound> createState() => _Q7soundState();
}

class _Q7soundState extends State<Q7sound> {
  String question =
      "Listen to this letter sound and then choose the letter whose sound you hear";
  var changeButton = false;
  var score = 0;
  final FlutterTts flutterTts = FlutterTts();

  speak(word) async {
    await flutterTts.setLanguage("en-US");
    await flutterTts.setPitch(1);
    await flutterTts.setVolume(1.0);
    await flutterTts.speak(word);
  }

  var word = "b";

  var tap_count = 0;
  bool isPlayingMsg = false;

  bool showImage = false;

  bool showoptions = false;
  bool showquestion = true;

  var letter = 'B';
  bool buttonPressed1 = false;
  void _letsPress1() {
    setState(() {
      buttonPressed1 = true;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        automaticallyImplyLeading: true,
        backgroundColor: Colors.cyan,
        title: Text("AD&DY"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(14.0),
        child: Column(children: [
          Container(
            alignment: Alignment.center,
            child: Text(
              "Q1: $question",
              style: const TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          ListTile(
            onTap: () async {
              speak(word);
              print(word);
            },
            leading: const Icon(Icons.play_arrow),
            title: const Text("Play",
                textScaleFactor: 1.2,
                style: TextStyle(
                  color: Colors.black,
                )),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              TxtOption("A"),
              TxtOption("B"),
              TxtOption("F"),
              TxtOption("D"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
            ],
          )
        ]),
      ),
    );
  }

  Material TxtOption(word) {
    return Material(
      elevation: 12,
      shadowColor: Colors.grey,
      color: Colors.cyan,
      borderRadius: BorderRadius.circular(changeButton ? 50 : 8),
      child: InkWell(
        onTap: () {
          Colors.red;
        },
        child: Container(
            height: 50,
            width: 50,
            alignment: Alignment.center,
            child: Text(word)),
      ),
    );
  }
}

Answer 1

for first issue you can do this:

ListTile(
            onTap: () async {
              speak(word);
              print(word);
            },
            leading: Icon(isPlayingMsg ? Icons.stop :Icons.play_arrow),
            title: const Text(isPlayingMsg ?"Stop" :"Play",
                textScaleFactor: 1.2,
                style: TextStyle(
                  color: Colors.black,
                )),
          ),

for second problem you can use wrap instead of row:

Wrap(
            spacing: 16,
            runSpacing: 16,
            children: [
              TxtOption("A"),
              TxtOption("B"),
              TxtOption("F"),
              TxtOption("D"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
              TxtOption("E"),
            ],
          )

and for space between children use spacing and between rows use runSpacing.