Flutter Question posted in
The official Flutter documentation can be found here.

Flutter: How to make suffixIcon go after input in InputDecoration?

I want to display several inputs with some text in between to get the coefficients to a cubic equation like this:

@override
Widget build(BuildContext context) {
return RichText(
  text: TextSpan(
    children: <InlineSpan>[
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true, contentPadding: EdgeInsets.all(0))),
              ))),
      const WidgetSpan(child: Text("x^3 + ")),
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true, contentPadding: EdgeInsets.all(0))),
              ))),
      const WidgetSpan(child: Text("x^2 + ")),
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: const IntrinsicWidth(
                child: TextField(
                    maxLines: null,
                    decoration: InputDecoration(
                        isDense: true, contentPadding: EdgeInsets.all(0))),
              ))),
      const WidgetSpan(child: Text("x + ")),
      WidgetSpan(
          child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: IntrinsicWidth(
                child: TextField(
                    controller: controller,
                    maxLines: null,
                    decoration: InputDecoration(
                      suffixIcon: IconButton(
                          onPressed: click,
                          icon: const Icon(Icons.done_outline_rounded),
                          splashColor: Colors.green,
                          tooltip: "Save equation"),
                    )),
              ))),
    ],
  ),
);
}

I am not sure if this is the way to do it. Anyway, I also need to add a button at the end of this input. Currently it looks like this:

screenshot

I wonder if there is a way to make this icon go after the underscore not above it? Thanks in advance.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I was able to find a workaround:

    Column(
  crossAxisAlignment: CrossAxisAlignment.end,
  mainAxisSize: MainAxisSize.min,
  children: [
    RichText(
      text: TextSpan(
        children: <InlineSpan>[
         ....
          WidgetSpan(
            child: ConstrainedBox(
              constraints: const BoxConstraints(minWidth: 32),
              child: IntrinsicWidth(
                child: TextField(
                  maxLines: null,
                ),
              ),
            ),
          ),
        ],
      ),
    ),
    Container(
    padding: const EdgeInsets.all(0.0),
    height: 30.0,
    child: IconButton( 
      color: Colors.green,
      onPressed: () {},
      icon: const Icon(Icons.done_outline_rounded),
      splashColor: Colors.green,
      tooltip: "Save equation"),
  )],
);

    Now it looks like this:

    screenshot


  2. 0

    Align the Icon and TextField: You can wrap the TextField in a Row to control the alignment of the icon relative to the input text. Here’s a modified version of your code:

         @override
  Widget build(BuildContext context) {
    var controller = TextEditingController();
    return Scaffold(
      body: RichText(
        text: TextSpan(
          children: <InlineSpan>[
            WidgetSpan(
                child: ConstrainedBox(
                    constraints: const BoxConstraints(minWidth: 32),
                    child: const IntrinsicWidth(
                      child: TextField(
                          maxLines: null,
                          decoration: InputDecoration(
                              isDense: true,
                              contentPadding: EdgeInsets.all(0))),
                    ))),
            const WidgetSpan(child: Text("x^3 + ")),
            WidgetSpan(
                child: ConstrainedBox(
                    constraints: const BoxConstraints(minWidth: 32),
                    child: const IntrinsicWidth(
                      child: TextField(
                          maxLines: null,
                          decoration: InputDecoration(
                              isDense: true,
                              contentPadding: EdgeInsets.all(0))),
                    ))),
            const WidgetSpan(child: Text("x^2 + ")),
            WidgetSpan(
                child: ConstrainedBox(
                    constraints: const BoxConstraints(minWidth: 32),
                    child: const IntrinsicWidth(
                      child: TextField(
                          maxLines: null,
                          decoration: InputDecoration(
                              isDense: true,
                              contentPadding: EdgeInsets.all(0))),
                    ))),
            const WidgetSpan(child: Text("x + ")),
            WidgetSpan(
              child: IntrinsicWidth(
                child: Row(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.end,
                  children: [
                    ConstrainedBox(
                        constraints: const BoxConstraints(minWidth: 32),
                        child: const IntrinsicWidth(
                          child: TextField(
                              maxLines: null,
                              decoration: InputDecoration(
                                  isDense: true,
                                  contentPadding: EdgeInsets.all(0))),
                        )),
                    IconButton(
                      visualDensity: VisualDensity.compact,
                      iconSize: 24,
                      onPressed: () {
                        // Your button click
                      },
                      icon: const Icon(Icons.done_outline_rounded),
                      splashColor: Colors.green,
                      tooltip: "Save equation",
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search