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:
I wonder if there is a way to make this icon go after the underscore not above it? Thanks in advance.
2
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:
Try following code. In this I have wrapped both of the fields in Row() with CrossAxisAlignment.Bottom
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",
),
],
),
),
),