class LogOutButton extends StatelessWidget { final String title; static final HexColor basicColor = HexColor('#E02B2B'); const LogOutButton({Key? key, required this.title}) : super(key: key); @override Widget build(BuildContext context) { return Container( padding: EdgeInsets.symmetric(vertical: 20.0), alignment: Alignment.center, child: OutlinedButton( onPressed: (){}, child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ SizedBox(width: 24, height: 24,), Text( title, style: GoogleFonts.roboto( fontWeight: FontWeight.w500, fontSize: 20.0, color: basicColor, ), ), Icon( Icons.logout, color: basicColor, ) ], ), style: ButtonStyle( maximumSize: MaterialStateProperty.all(Size(300.0, 50.0)), minimumSize: MaterialStateProperty.all(Size(200.0, 50.0)), overlayColor: MaterialStateProperty.all(Colors.transparent), side: MaterialStateProperty.all( BorderSide( color: basicColor, width: 2.0, ) ), shape: MaterialStateProperty.all( RoundedRectangleBorder( borderRadius: BorderRadius.circular(20.0), ) ) ) ), ); } }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter