Flutter：onPressed 在按钮右侧显示文本

Question

我创建了一个带有字母“M”的圆形按钮。点击此按钮后，我想在其右侧显示文本。最初，按钮右侧不应该有文本，只有在点击按钮后才会显示。

我已经能够在 onPressed 中收到要打印的消息，但我很困惑为什么我无法在按钮的一侧显示任何内容。

我怎样才能让它工作？

}

class _SelectDaysState extends State<SelectDays> {
  bool selectedDay = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
      height: MediaQuery.of(context).size.height,
      width: MediaQuery.of(context).size.width,
      decoration: BoxDecoration(
        gradient: LinearGradient(colors: [
          Theme.of(context).colorScheme.charcoalGrey,
          Theme.of(context).colorScheme.black
        ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          const SizedBox(height: 60),
          Padding(
            padding: const EdgeInsets.only(left: 20, bottom: 70),
            child: Text(
              'Select your days!',
              style: h1,
            ),
          ),
          Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.only(left: 20),
              ),
              Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Container(
                        child: SizedBox.fromSize(
                          size: Size(56, 56),
                          child: ClipOval(
                            child: Material(
                              color: Theme.of(context).colorScheme.watermelon,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  RaisedButton(
                                                  child: Text('Selected',
                                                  style: TextStyle(
                                                  color: Colors.white),
                                                  ),
                                                  onPressed: () {
                                                    setState(() {
                                                      selectedDay = true;
                                                    });

Column(
                children: <Widget>[
                  Row(
                    children: <Widget>[
                      Container(
                        child: SizedBox.fromSize(
                          size: Size(56, 56),
                          child: ClipOval(
                            child: Material(
                              color: Theme.of(context).colorScheme.watermelon,
                              child: Column(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: <Widget>[
                                  FlatButton(
                                      child: Text('M', style: h2),
                                      onPressed: () {
                                        SizedBox(width: 40,);
                                        Visibility(child: Text("Gone",
                                        style: TextStyle(color: Colors.white),
                                        ),
                                        visible: true,
                                        );

Answer 1

看看我创建的这个例子：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        //
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  bool selectedDay = false;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        body: Container(
          height: MediaQuery.of(context).size.height,
          width: MediaQuery.of(context).size.width,
          decoration: BoxDecoration(
            gradient: LinearGradient(colors: [
              Colors.white,
              Colors.white10,
            ], begin: Alignment.topCenter, end: Alignment.bottomCenter),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              const SizedBox(height: 60),
              Padding(
                padding: const EdgeInsets.only(left: 20, bottom: 70),
                child: Text(
                  'Select your days!',
                ),
              ),
              Row(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(left: 20),
                  ),
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Container(
                            child: SizedBox.fromSize(
                              size: Size(56, 56),
                              child: ClipOval(
                                child: Material(
                                  color: Colors.blue,
                                  child: Column(
                                    mainAxisAlignment: MainAxisAlignment.center,
                                    children: <Widget>[
                                      RaisedButton(
                                        child: Text(
                                          'M',
                                          style: TextStyle(color: Colors.white),
                                        ),
                                        onPressed: () {
                                          setState(() {
                                           // This will show the text
                                            // selectedDay = true;
                                            // This will hide the text
                                            // selectedDay  =false;
                                            // And the Following will toggle 
                                            selectedDay = !selectedDay;
                                          });
                                        },
                                      )
                                    ],
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: Visibility(
                              visible: selectedDay,
                              child: Text(
                                "Gone",
                                style: TextStyle(color: Colors.black),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

您可以按照上面的示例更改颜色，我随机添加了颜色。 让我知道它是否有效。

Answer 2

您可以使 Text() 的文本属性取决于您的 selectedDay 的值。

Text(
  selectedDay ? 'Hello World' : '', // When true, "Hello World" is shown, otherwhise nothing
),

Answer 3

尝试使用可见性小部件。这样您就可以轻松地显示/隐藏您的文本。

https://api.flutter.dev/flutter/widgets/Visibility-class.html

这个问题也有一些你可能喜欢的答案，

Show/hide widgets in Flutter programmatically