How to give one Side of text button during hover? - flutter

Question

I was trying to make a TextButton with one-sided shown when Hover on it. One of the most popular ways to decorate a button in CSS. I am facing difficulty to do in flutter.
I tried like this:
TextButton(
onPressed: () {},
child: Text('About Us'),
style: ButtonStyle(
shape: MaterialStateProperty.resolveWith<OutlinedBorder>((states) {
if (states.contains(MaterialState.hovered)) {
return RoundedRectangleBorder(
side: BorderSide(color: Colors.red),
borderRadius: BorderRadius.zero,
);
} else {
return RoundedRectangleBorder(
side: BorderSide(color: Colors.blue),
borderRadius: BorderRadius.zero,
);
}
}),
),
)
But there isn't any property of the button to have only one side, like container have Border.
or am I missing something out?

Answer 1

You can achieve this by using an InkWell with a DecoratedBox.
import 'package:flutter/material.dart';
class HoveredButtonExample extends StatefulWidget {
const HoveredButtonExample({Key? key}) : super(key: key);
#override
_HoveredButtonExampleState createState() => _HoveredButtonExampleState();
}
class _HoveredButtonExampleState extends State<HoveredButtonExample> {
late bool showBorder = false;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: DecoratedBox(
decoration: BoxDecoration(
border: showBorder
? Border(
bottom: BorderSide(color: Colors.white, width: 2),
)
: null,
),
child: InkWell(
onTap: () {},
onHover: (hovered) {
setState(() {
showBorder = hovered;
});
},
child: TextButton(
onPressed: () {
print('Text button pressed');
},
child: Text('Button'),
),
),
),
),
);
}
}

Answer 2

Here's an sample code :-
bool showHower = false;
DecoratedBox(
decoration: BoxDecoration(
border: showBorder
? Border(
bottom: BorderSide(color: Colors.grey, width: 2),
)
: null,
),
child: InkWell(
onTap: () {},
onHover: (hovered) {
setState(() {
showHower = hovered;
});
},
child: TextButton(
onPressed: () {
},
child: Text('HoverButton'),
),
),
),