Floating Menu In Flutter :
This flutter tutorial post is Floatting Menu In Flutter.
Screenshot :

fab.dart
import 'package:flutter/material.dart'; class FabItem { const FabItem(this.title, this.icon, {this.onPress}); final IconData icon; final Function onPress; final String title; } class FabMenuItem extends StatelessWidget { const FabMenuItem(this.item, {Key key}) : super(key: key); final FabItem item; @override Widget build(BuildContext context) { return MaterialButton( shape: StadiumBorder(), padding: EdgeInsets.only(top: 8, bottom: 8, left: 24, right: 16), color: Colors.white, splashColor: Colors.grey.withOpacity(0.1), highlightColor: Colors.grey.withOpacity(0.1), elevation: 0, highlightElevation: 2, disabledColor: Colors.white, onPressed: item.onPress, child: Row(mainAxisSize: MainAxisSize.min, children: <Widget>[ Text(item.title), SizedBox(width: 8), Icon(item.icon, color: Colors.black), ])); } } class ExpandedAnimationFab extends AnimatedWidget { const ExpandedAnimationFab({ @required this.items, this.onPress, Animation animation, }) : super(listenable: animation); final List<FabItem> items; final Function onPress; get _animation => listenable; Widget buildItem(BuildContext context, int index) { final screenWidth = MediaQuery.of(context).size.width; final transform = Matrix4.translationValues( -(screenWidth - _animation.value * screenWidth) * ((items.length - index) / 4), 0.0, 0.0, ); return Align( alignment: Alignment.centerRight, child: Transform( transform: transform, child: Opacity( opacity: _animation.value, child: FabMenuItem(items[index]), ))); } @override Widget build(BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.end, children: [ IgnorePointer( ignoring: _animation.value == 0, child: ListView.separated( shrinkWrap: true, physics: NeverScrollableScrollPhysics(), separatorBuilder: (_, __) => SizedBox(height: 9), padding: EdgeInsets.symmetric(vertical: 12), itemCount: items.length, itemBuilder: buildItem, ), ), FloatingActionButton( backgroundColor: Colors.blue, child: AnimatedIcon( color: Colors.white, icon: AnimatedIcons.menu_close, progress: _animation, ), onPressed: onPress, ) ]); } }
main.dart
import 'package:flutter/material.dart'; import 'package:flutter/painting.dart'; import 'package:flutter/rendering.dart'; import 'fab.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Flutter Tutorial', theme: ThemeData(primaryColor: Colors.white, accentColor: Colors.grey), home: MyHomePage(), ); } } class MyHomePage extends StatefulWidget { @override _MyHomePage createState() => _MyHomePage(); } class _MyHomePage extends State<MyHomePage> with SingleTickerProviderStateMixin { int currentItemIndex = 0; Animation<double> _animation; AnimationController _controller; @override void initState() { _controller = AnimationController( vsync: this, duration: Duration(milliseconds: 260), ); final curvedAnimation = CurvedAnimation(curve: Curves.easeInOut, parent: _controller); _animation = Tween<double>(begin: 0, end: 1).animate(curvedAnimation); super.initState(); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.white, appBar: AppBar(title: Text('Floatting Menu')), floatingActionButton: ExpandedAnimationFab( items: [ FabItem( "All", Icons.favorite_border, onPress: () { _controller.reverse(); }, ), FabItem( "Flutter", Icons.favorite_border, onPress: () { _controller.reverse(); }, ), FabItem( "Android", Icons.favorite_border, onPress: () { _controller.reverse(); }, ), FabItem( "PHP", Icons.favorite_border, onPress: () { _controller.reverse(); }, ), ], animation: _animation, onPress: () { if (_controller.isCompleted) { _controller.reverse(); } else { _controller.forward(); } }, ), ); } }
The flutter tutorial is a website that bring you the latest and amazing resources of code. All the languages codes are included in this website. The languages like flutter, android, java,kotlin etc.with the help of this languages any user can develop the beautiful application
For more information about Flutter. visit www.fluttertutorial.in