Last updated:
0 purchases
iconswitcher
IconSwitcher #
A Flutter plugin that allows you to create an icon switcher on the AppBar Widget
PARAMETERS #
NAME
DESCRIPTION
DEFAULT VALUE
width
the final Widget width
required
height
the final Widget height
required
marginTop
the final Widget marginTop
required
icon1
the first Icon
required
icon2
the second Icon
required
color1
the color of the first Icon
required
color2
the color of the second Icon
required
duration
the animation duration when a user clicks on one of the icons
required
firstIconSelectedColor
the color of the first selector
Colors.redAccent
secondIconSelectedColor
the color of the second selector
Colors.orangeAccent
curve
the animation Curve type
Curves.bounceOut
onChange
Function(bool): return true when the first Icon is selected; false otherwise
EXAMPLE OF USAGE
You can use it to create multiple screen views inside a same Widget using all the Flutter Animated Widgets
CODE:
class Screen extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _Screen();
}
}
class _Screen extends State<Screen> with TickerProviderStateMixin {
bool left = true;
Duration duration = Duration(milliseconds: 400);
@override
Widget build(BuildContext context) {
double marginTop = 1.5;
double height = kToolbarHeight - marginTop * 2;
double width = height * 2;
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Colors.white,
title: Text(
"Title",
),
actions: <Widget>[
IconSwitcher(
width: width,
height: height,
marginTop: marginTop,
duration: duration,
icon1: Icons.satellite,
icon2: Icons.content_copy,
color1: Colors.purple,
color2: Colors.white,
backgroundColor: Colors.black,
firstIconSelectedColor: Colors.redAccent,
secondIconSelectedColor: Colors.orangeAccent,
onChange: (bool result) {
setState(() {
left = result;
});
},
)
],
),
body: AnimatedCrossFade(
firstChild: Container(
color: Colors.black54,
),
secondChild: Container(
color: Colors.orange,
),
duration: duration,
crossFadeState:
left ? CrossFadeState.showFirst : CrossFadeState.showSecond,
firstCurve: Curves.bounceOut,
secondCurve: Curves.bounceOut,
),
));
}
}
copied to clipboard
For personal and professional use. You cannot resell or redistribute these repositories in their original state.
There are no reviews.