如何使用列制作這種類型的 TextButton？ 在 Flutter

Question

我嘗試讓任何人都知道或對此有任何想法的這種類型的文本按鈕。
期望的結果

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

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

  @override
  _MainhomeState createState() => _MainhomeState();
}

class _MainhomeState extends State<Mainhome> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              Expanded(
                child: FlatButton(
                  color: Colors.red,
                  child: Container(
                    child: Text(
                      'One',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note1.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.orange,
                  child: Container(
                    child: Text(
                      'Two',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note2.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.purple,
                  child: Container(
                    child: Text(
                      'Three',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note3.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.teal,
                  child: Container(
                    child: Text(
                      'Four',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note4.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.yellow,
                  child: Container(
                    child: Text(
                      'Five',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note5.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.green,
                  child: Container(
                    child: Text(
                      'Six',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note6.wav');
                  },
                ),
              ),
              Expanded(
                child: FlatButton(
                  color: Colors.blue,
                  child: Container(
                    child: Text(
                      'Seven',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note7.wav');
                  },
                ),
              ),
              Expanded(
                child: TextButton(
                  child: Container(
                    child: Text(
                      'Seven',
                      style: TextStyle(color: Colors.white, fontSize: 25),
                    ),
                  ),
                  style: ButtonStyle(
                    backgroundColor:
                        MaterialStateProperty.all<Color>(Colors.green),
                  ),
                  onPressed: () {
                    final player = AudioCache();
                    player.play('note7.wav');
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

嗯，你想用左 Alignment 創建一個短按鈕嗎？

就這樣做

    Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        FlatButton(
          minWidth:200,
          color: Colors.red,
          child: Text('One',style: TextStyle(color: Colors.white, fontSize: 25),),
          onPressed: () {
            final player = AudioCache();
            player.play('note1.wav');
          },
        ),
        //your other button
      ],
    );

注意： FlatButton 在 flutter 2.0.3 上已棄用，而是使用TextButton

Answer 2

您可以通過使用 flutter 中的Stack和Column小部件來實現此 UI 設計。 找到下面的代碼片段：

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

  @override
  _MainhomeState createState() => _MainhomeState();
}

class _MainhomeState extends State<Mainhome> {
  int _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Stack(children: [
          Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: [
              FlatButton(
                color: Colors.red,
                child: Container(
                  height: 80,
                  alignment: Alignment.center,
                  child: Text(
                    'One',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
                onPressed: () {
                  final player = AudioCache();
                  player.play('note1.wav');
                },
              ),
              FlatButton(
                color: Colors.orange,
                child: Container(
                  height: 80,
                  alignment: Alignment.center,
                  child: Text(
                    'Two',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
                onPressed: () {
                  final player = AudioCache();
                  player.play('note2.wav');
                },
              ),
              FlatButton(
                color: Colors.purple,
                child: Container(
                  height: 80,
                  alignment: Alignment.center,
                  child: Text(
                    'Three',
                    style: TextStyle(color: Colors.white, fontSize: 25),
                  ),
                ),
                onPressed: () {
                  final player = AudioCache();
                  player.play('note3.wav');
                },
              ),
            ],
          ),
          Positioned(
            top: 60,
            left: 0,
            child: FlatButton(
              color: Colors.teal,
              child: Container(
                height: 40,
                width: 150,
                alignment: Alignment.center,
                child: Text(
                  'Four',
                  style: TextStyle(color: Colors.white, fontSize: 25),
                ),
              ),
              onPressed: () {
                final player = AudioCache();
                player.play('note4.wav');
              },
            ),
          ),
          Positioned(
            top: 140,
            left: 0,
            child: FlatButton(
              color: Colors.yellow,
              child: Container(
                height: 40,
                width: 150,
                alignment: Alignment.center,
                child: Text(
                  'Five',
                  style: TextStyle(color: Colors.white, fontSize: 25),
                ),
              ),
              onPressed: () {
                final player = AudioCache();
                player.play('note4.wav');
              },
            ),
          )
        ]),
      ),
    );
  }

Answer 3

你的 UI 看起來像一個不錯的鋼琴鍵盤，對吧？ 這是一個你可以嘗試的骨架。 簡單來說你可以使用Stack和Positioned來實現想要的 UI。

完整示例代碼：

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

main() {
  runApp(MaterialApp(
    home: Mainhome(),
  ));
}

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

  @override
  _MainhomeState createState() => _MainhomeState();
}

class _MainhomeState extends State<Mainhome> {
  double adjustment = 50;
  int _currentIndex = 0;
  int keySizeNumber = 7;
  double bigKeySize;
  double smallKeySize;

  @override
  Widget build(BuildContext context) {
    bigKeySize = MediaQuery.of(context).size.height / keySizeNumber;
    smallKeySize = bigKeySize * 0.6;

    return MaterialApp(
      home: SafeArea(
        child: Container(
          color: Colors.white,
          padding: EdgeInsets.symmetric(vertical: 10),
          child: Stack(
            children: [
              Column(
                children: List<Widget>.generate(7, (index) => _buildBigKey()),
              ),
              Positioned(
                top: bigKeySize * 0.6,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 2 + 50,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 5 + 50,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 7 + 25,
                child: _buildSmallKey(),
              ),
              Positioned(
                top: bigKeySize * 0.6 * 9 - 10,
                child: _buildSmallKey(),
              ),
            ],
          ),
        ),
      ),
    );
  }

  _buildBigKey() {
    return Expanded(
      child: FlatButton(
        child: Container(
          alignment: Alignment.center,
          height: bigKeySize,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
              border: Border.all(color: Colors.red), color: Colors.white),
          child: Text(
            'Key',
            style: TextStyle(color: Colors.red, fontSize: 25),
          ),
        ),
        onPressed: () {
          final player = AudioCache();
          player.play('note1.wav');
        },
      ),
    );
  }

  _buildSmallKey() {
    return FlatButton(
      child: Container(
        alignment: Alignment.center,
        height: smallKeySize,
        width: MediaQuery.of(context).size.width * 0.7,
        decoration: BoxDecoration(
            border: Border.all(color: Colors.red), color: Colors.white),
        child: Text(
          'Key',
          style: TextStyle(color: Colors.red, fontSize: 25),
        ),
      ),
      onPressed: () {
        final player = AudioCache();
        player.play('note1.wav');
      },
    );
  }
}

結果：