'I want to make a button with icon on Flutter
I have a question. I want to make a button that has an icon on it. How should I do it?
I have tried using an ElevatedButton. It does not seem to be really close to the button that I wanted.
Here's the code that I have written:
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
ElevatedButton(
onPressed: () {},
child: Padding(
padding: EdgeInsets.fromLTRB(0, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
"Masuk",
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w600,
),
),
SizedBox(
child: Padding(
padding: EdgeInsets.fromLTRB(
10,
0,
0,
0,
),
child: Icon(
Icons.arrow_forward,
color: Colors.white,
),
),
),
Here's the sample that I wanted to make:
Solution 1:[1]
Replace the ElevatedButton to Container and put IconButton instead of Icon
Solution 2:[2]
You can have a button with an icon using the following code. (Icon will appear on left side)
ElevatedButton.icon(
icon: const Icon(Icons.add),
label: const Text("Test"),
onPressed: (){
//Function
},
);
You can also create a custom widget and wrap it with InkWell and use the onTap function.
Example:
InkWell(
onTap: (){
// function
},
child: myWidget())
Solution 3:[3]
Try this also: Above answer is also correct.
Container(
width: 250,
height: 50,
decoration: BoxDecoration(
color: Colors.indigo[400],
borderRadius: BorderRadius.circular(13),
),
child: InkWell(
onTap: () {
// function
},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Opacity(
opacity: 0.0,
child: Padding(
padding: EdgeInsets.all(5),
child: CircleAvatar(
radius: 15,
child: Icon(
Icons.arrow_forward,
color: Colors.white,
size: 15.0,
),
backgroundColor: Colors.indigo,
),
),
),
Text(
'MASUK',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14, color: Colors.white),
),
Padding(
padding: EdgeInsets.all(5),
child: CircleAvatar(
radius: 15,
child: Icon(
Icons.arrow_forward,
color: Colors.white,
size: 15.0,
),
backgroundColor: Colors.indigo,
),
),
],
),
),
),
Solution 4:[4]
A very simple code to make a button like yours is,
RaisedButton.icon(
icon: const Text('UPADATE'),
label: Icon(Icons.next_plan),
textColor: Colors.white,
color: Colors.lightBlue,
onPressed: () {},
),
Solution 5:[5]
https://pub.dev/packages/simple_animations
////i used this package to show animation button like this
import 'package:flutter/material.dart';
import 'package:simple_animations/simple_animations.dart';
enum AnimationType { opacity, translateX }
class FadeAnimation extends StatelessWidget {
final double delay;
final Widget child;
const FadeAnimation(this.delay, this.child);
@override
Widget build(BuildContext context) {
final tween = MultiTween<AnimationType>()
..add(AnimationType.opacity, Tween(begin: 0.0, end: 1.0),
Duration(milliseconds: 500),)
..add(
AnimationType.translateX,
Tween(begin: 30.0, end: 1.0),
Duration(milliseconds: 500),
);
return PlayAnimation<MultiTweenValues<AnimationType>>(
delay: Duration(milliseconds: (500 * delay).round()),
duration: tween.duration,
tween: tween,
child: child,
builder: (context, child, value) => Opacity(
opacity: value.get(AnimationType.opacity),
child: Transform.translate(
offset: Offset(value.get(AnimationType.translateX), 0), child: child),
),
);
}
}
/////how i used this code
import 'dart:async';
import 'package:bookshelf_app/resource/colors.dart';
import 'package:bookshelf_app/views/Login/LogInPage.dart';
import 'package:bookshelf_app/views/SplashScreen/FadeAnimation.dart';
import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
class SplashPage extends StatefulWidget {
@override
_SplashPageState createState() => _SplashPageState();
}
class _SplashPageState extends State<SplashPage> with TickerProviderStateMixin {
AnimationController _scaleController;
AnimationController _scale2Controller;
AnimationController _widthController;
AnimationController _positionController;
Animation<double> _scaleAnimation;
Animation<double> _scale2Animation;
Animation<double> _widthAnimation;
Animation<double> _positionAnimation;
bool hideIcon = false;
startTime() async {
var _duration = new Duration(seconds: 5);
return new Timer(_duration, myPage);
}
void myPage() {
_scaleController.forward();
}
@override
void initState() {
// TODO: implement initState
super.initState();
startTime();
_scaleController =
AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_scaleAnimation =
Tween<double>(begin: 1.0, end: 0.8).animate(_scaleController)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_widthController.forward();
}
});
_widthController =
AnimationController(vsync: this, duration: Duration(milliseconds: 600));
_widthAnimation =
Tween<double>(begin: 80.0, end: 300.0).animate(_widthController)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
_positionController.forward();
}
});
_positionController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1000));
_positionAnimation =
Tween<double>(begin: 0.0, end: 215.0).animate(_positionController)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
setState(() {
hideIcon = true;
});
_scale2Controller.forward();
}
});
_scale2Controller =
AnimationController(vsync: this, duration: Duration(milliseconds: 300));
_scale2Animation =
Tween<double>(begin: 1.0, end: 32.0).animate(_scale2Controller)
..addStatusListener((status) {
if (status == AnimationStatus.completed) {
// Navigator.pushReplacement(
// context, MaterialPageRoute(builder: (context) => SplashScreen(sec: 1)));
getSessionValues();
// Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: LoginPage()));
}
});
}
getSessionValues() async {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) =>
LogInMain()));
}
@override
Widget build(BuildContext context) {
final double width = MediaQuery
.of(context)
.size
.width;
final double height = MediaQuery
.of(context)
.size
.height;
return Scaffold(
backgroundColor: Colors.white,
body: Container(
width: double.infinity,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.topCenter,
child: Padding(
padding: EdgeInsets.only(top: 80),
child: FadeAnimation(
1.6,
Container(
width: width / 1.3,
height: height / 2.8,
decoration: BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: AssetImage('assets/BOOKHUB.png'),
fit: BoxFit.cover)),
)),
)),
Container(
padding: EdgeInsets.only(bottom:20.0,left:20,right:20),
child: Column(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
// SizedBox(height: height / 30,),
FadeAnimation(
1.0,
Center(
child: Text(
"BookShops and libraries are a backstage of success!!",
style: GoogleFonts.vollkorn(
color: Colors.black.withOpacity(.7),
height: 1.4,
fontSize: 24),
textAlign: TextAlign.center,
),
)),
SizedBox(
height: height / 20,
),
FadeAnimation(
1.3,
AnimatedBuilder(
animation: _scaleController,
builder: (context, child) =>
Transform.scale(
scale: _scaleAnimation.value,
child: Center(
child: AnimatedBuilder(
animation: _widthController,
builder: (context, child) =>
Container(
width: _widthAnimation.value,
height: 80,
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
borderRadius: BorderRadius
.circular(50),
color: MyColorTheme.darkGreen.withOpacity(
.4)),
child: InkWell(
onTap: () {
_scaleController.forward();
},
child: Stack(children: <Widget>[
AnimatedBuilder(
animation: _positionController,
builder: (context, child) =>
Positioned(
left: _positionAnimation
.value,
child: AnimatedBuilder(
animation: _scale2Controller,
builder: (context,
child) =>
Transform.scale(
scale:
_scale2Animation
.value,
child: Container(
width: 60,
height: 60,
decoration: BoxDecoration(
shape:
BoxShape
.circle,
color: MyColorTheme.darkGreen),
child: hideIcon ==
false
? Icon(
Icons
.arrow_forward,
color:
Colors
.white,
)
: Container(),
)),
),
),
),
]),
),
),
),
)),
)),
SizedBox(
height: height / 20,
),
],
),
)
],
),
),
);
}
}
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | ??? |
| Solution 2 | Nishuthan S |
| Solution 3 | Shweta Chauhan |
| Solution 4 | Anandh Krishnan |
| Solution 5 | Vishal_VE |