Flutter: onPressed displays text to the right of the button

Question

I have created a round button with the letter 'M'. Once this button is tapped I want to display text to the right of it. Initially there should be no text to the right of the button and only displayed once the button is tapped.

I have been able to get a message to print in onPressed but I'm confused as to why I can't get anything to display to the side of the button.

How would I get this to work?

}

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,
                                        );

please provide a better snippet with defined variables – Mathiew Abbas Jun 16 '20 at 15:27 — Mathiew Abbas, Jun 16 '20 at 15:27

score 1 · Accepted Answer · answered Jun 16 '20 at 17:42

Just check out this example that i have created:

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),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

you can change the color as you as per the above example,i have randomly added the colors. Let me know if it works.

Thank you so much Sagar. It has worked. This has been confusing me all day, thank you :) — SK1dev, Jun 16 '20 at 18:25

score 0 · Answer 2 · answered Jun 16 '20 at 15:39

0

You could just make the text-property of Text() dependent on the value of your selectedDay.

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

answered Jun 16 '20 at 15:39

C4s4r

404
3
7

score 0 · Answer 3 · answered Jun 16 '20 at 16:01

0

Try Using Visibility Widget. that way you can easily show/hide your text.

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

also this question has some answer you might like,

Show/hide widgets in Flutter programmatically

answered Jun 16 '20 at 16:01

Srilal Sachintha

1,335
1
12
18

I have tried with visibility too but it hasn't worked. – SK1dev Jun 16 '20 at 16:16
@sk7 can you provide more code? the part where the button with M is implemented? and are you setting the visibility with a Setstate? – Srilal Sachintha Jun 16 '20 at 16:18
@sk7 you have doing it all wrong. putting widgets inside a onPressed WILL NOT do anything!. put them after the button and set the visibility as a variable and change the variable to true inside the Onpress and a SetState – Srilal Sachintha Jun 16 '20 at 17:35

Flutter: onPressed displays text to the right of the button

3 Answers3