как добавить текст в центр каждого цвета?

Question

введите здесь описание изображения Цель состоит в том, чтобы добавить текст в середину каждой цветной полосы. Курс заставил нас реорганизовать наш код с помощью функций. Как и раньше, я легко мог добавлять текст. Теперь, когда код был отредактирован, мне не удалось понять, как добавить текст. Вот код после рефакторинга.

import 'package:audioplayers/audio_cache.dart';
import 'package:flutter/material.dart';

void main() => runApp(XylophoneApp());

class XylophoneApp extends StatelessWidget {
  void buttonSound(int noteNumber) {
    final player = AudioCache();
    player.play('note$noteNumber.wav');
  }

  Expanded buildKey({Color color, int noteNumber, String text}) {
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          buttonSound(noteNumber);
        },
        child: null,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              buildKey(color: Colors.red, noteNumber: 1),
              buildKey(color: Colors.blue, noteNumber: 2),
              buildKey(color: Colors.orangeAccent, noteNumber: 3),
              buildKey(color: Colors.deepPurpleAccent, noteNumber: 4),
              buildKey(color: Colors.lightGreen, noteNumber: 5),
              buildKey(color: Colors.blueGrey, noteNumber: 6),
              buildKey(color: Colors.lime, noteNumber: 7),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

В вашем buildKey добавьте дочерний элемент Center и Text:

 Expanded buildKey({Color color, int noteNumber, String text}) {
    return Expanded(
      child: FlatButton(
        color: color,
        onPressed: () {
          buttonSound(noteNumber);
        },
        child: Center(
          child: Text(
            text,
          ),
        ),
      ),
    );
  }

И затем, когда вы вызываете buildKey, обязательно добавьте параметр text в все это:

children: <Widget>[
              buildKey(color: Colors.red, noteNumber: 1, text: 'Note 1'),
              buildKey(color: Colors.blue, noteNumber: 2, text: 'Note 2'),
              buildKey(color: Colors.orangeAccent, noteNumber: 3, text: 'Note 3'),
              buildKey(color: Colors.deepPurpleAccent, noteNumber: 4, text: 'Note 4'),
              buildKey(color: Colors.lightGreen, noteNumber: 5, text: 'Note 5'),
              buildKey(color: Colors.blueGrey, noteNumber: 6, text: 'Note 6'),
              buildKey(color: Colors.lime, noteNumber: 7, text: 'Note 7'),
            ],

Надеюсь, это будет полезно.

Answer 2

Убедитесь, что вы передаете текст на buildKey

Expanded buildKey({Color color, int noteNumber, String text}) {
  return Expanded(
    child: FlatButton(
      color: color,
      onPressed: () {
        buttonSound(noteNumber);
      },
      child: Text(text),
    ),
  );
}