Flutter: How to add two text lines to one button?-CodePudding

Dear Stackoverflow People,

I need to program a button in Flutter as follows:

How can I do that in Flutter?

I have the problem that TextButton() allows only to add "one line of text". However, I need a title and a description with different font sizes within a button. How can this be done?

Thanks a lot!

CodePudding user response：

You can use Text.rich widget as a TextButton child. I tried on this online IDE and it works.In Text.rich , You can define List<TextSpan> children, and add text spans has different Text Styles . My code sample is here:

        TextButton(
          style: TextButton.styleFrom(
            padding: const EdgeInsets.all(16.0),
            primary: Colors.white,
            textStyle: const TextStyle(fontSize: 20),
          ),
          onPressed: () {},
          child: const Text.rich(
                                TextSpan(
                                      text: 'Hello', // default text style
                                      children: <TextSpan>[
                                                TextSpan(text: ' beautiful\n', style: TextStyle(fontStyle: FontStyle.italic)),
                                                TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
                                                ],
                                        ),
                                ),
        )

CodePudding user response：

You could create your own button.

Something like this:

 GestureDetector(
          onTap: () {},
          child: Container(
            decoration: BoxDecoration(),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text("text big"),
                Text("text small"),
              ],
            ),
          ),
        ),

CodePudding user response：

You can give "Column" (with your text) to the "child" property of any button.

in your case OutlinedButton

OutlinedButton(
          onPressed: () {},
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                'Language',
                style: Theme.of(context).textTheme.subtitle1,
              ),
              Text(
                'Tap To Change',
                style: Theme.of(context).textTheme.caption,
              ),
            ],
          ),
        ),

and then you can use the style properties of Test Widget to change their style