![](/img/trans.png)
[英]How to prevent coming up floating action button (FAB) when clicking a search box in Flutter?
[英]In flutter How to change FAB (Floating Action Button) custom animation Icon
我是 flutter 的新手,现在我坚持要更改 FAB 动画。实际上我正在尝试在我按下 FAB 之前它添加了图标,按下 FAB 后它更改了关闭添加图标的图标。 我提供了一个动画 gif 文件链接以更了解如果有人知道解决方案请建议我解决这个问题。
这是链接https://miro.medium.com/max/468/1*qGa6VU4grjqEwAOScRm9BA.gif
在此链接中提供的动画显示,按下之前显示菜单选项图标,按下后显示关闭图标,但我想添加选项而不是菜单选项。
像 add_close 不是 menu_close 动画图标。
我希望你理解我的问题并建议我
我认为此代码满足您的要求。
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 FAB Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text("FAB"),
),
floatingActionButton: AnimatedIconButton(
size: 30,
onPressed: () {
},
duration: Duration(milliseconds: 200),
endIcon: Icon(
Icons.close,
color: Colors.white,
),
startIcon: Icon(
Icons.add,
color: Colors.white,
),
startBackgroundColor: Colors.blue,
endBackgroundColor: Colors.blue,
),
);
}
}
这是我使用的命名空间:
import 'package:flutter/material.dart';
import 'package:animated_icon_button/animated_icon_button.dart';
此代码将适用于您的所有要求,例如动画、按下的多个 fab 按钮,还支持图像作为 fab 图标。
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 FAB Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: UniWidget(),
);
}
}
class UniWidget extends StatefulWidget {
@override
_UniWidgetState createState() => _UniWidgetState();
}
class _UniWidgetState extends State<UniWidget> {
@override
Widget build(BuildContext context) {
var childButtons = List<UnicornButton>();
childButtons.add(UnicornButton(
hasLabel: false,
currentButton: FloatingActionButton(
backgroundColor: Colors.blue,
mini: false,
child: Padding(
padding: const EdgeInsets.all(15),
child: Image.asset('assets/images/arrow.png'),
),
onPressed: () {
print('scanbar');
},
)));
childButtons.add(UnicornButton(
hasLabel: false,
currentButton: FloatingActionButton(
backgroundColor: Colors.blue,
mini: false,
child: Padding(
padding: const EdgeInsets.all(15),
child: Image.asset('assets/images/contact.png'),
),
onPressed: () {
print('Contact');
},
)));
return Scaffold(
floatingActionButton: UnicornDialer(
parentButtonBackground: Colors.blue,
orientation: UnicornOrientation.VERTICAL,
childPadding: 10.0,
parentButton: Icon(Icons.add),
childButtons: childButtons),
appBar: AppBar(
title: Text("Fab demo"),
),
body: Center());
}
}
这是命名空间
import 'package:flutter/material.dart';
import 'package:unicorndial/unicorndial.dart';
我希望它能够满足您的所有类型的要求并在您的项目中运行良好。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.