[Flutter] Flutter: How to position an icon on right-bottom of button without setting height to...

How to position an icon on right-bottom of a Container that wraps a button, without setting a height to the Container?

I'm trying to use Stack, without success. As suggested in many answers, I cannot set a height to the Container because, then, depending on the size of my text, it gets truncated (and I need the whole text to be shown (it is a choice in a trivia app)). See the snippet and print below to see what happens in this case:

1) Setting a height to the container (does not work):


The Icon goes to bottom-right, but the text gets truncated:


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: const MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget choiceSelectedButton = Container(
height: 50,
width: 100,
child: Stack(
children: [
Align(
child: OutlinedButton(
onPressed: () {},
child: Text('test test test test test test test test')),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(
Icons.check_circle,
color: Colors.green,
size: 30,
),
),
],
),
);

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(child: choiceSelectedButton),
);
}
}





Then I have tried to remove the height and tried wrapping both the Container and the Icon in Expanded, Flexible, FittedBox (even if it woudn't make sense):

2) Removing height property from container (does not work):


Now, the text does not truncate, but the icon gets out of position:


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
const MyApp({super.key});

@override
Widget build(BuildContext context) {
return MaterialApp(
home: const MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
const MyHomePage({
super.key,
});

@override
State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
@override
Widget choiceSelectedButton = Container(
width: 100,
child: Stack(
children: [
Align(
child: OutlinedButton(
onPressed: () {},
child: Text('test test test test test test test test')),
),
Align(
alignment: Alignment.bottomRight,
child: Icon(
Icons.check_circle,
color: Colors.green,
size: 30,
),
),
],
),
);

Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(child: choiceSelectedButton),
);
}
}





How can I do that?

Questions searched:


How to put an icon in the bottom right edge of container in flutter

icon at bottom right corner flutter

Place an icon on the buttom right of a Container

(but solutions are to set height)

Flutter position button bottom very right? (spacer() does not work)

Flutter container to position bottom right alignment property does not work

How to position an Icon/Button at the Top Right corner of a Container in FLUTTER?

simpply didn't work

icon at bottom right corner flutter (but solution is not to set height and therefore problem 2 happens)

Continue reading...