[英]Flutter: How to use animated icon in the AppBar - I want to use this animated icon instead of Animatedless Icon, in the appbar of flutter app
I want to use the animated icon in this AppBar, but can not be done because the animated icon have a stateful widget with "with TickerProviderStateMixin".我想在这个 AppBar 中使用动画图标,但无法完成,因为动画图标有一个带有“with TickerProviderStateMixin”的有状态小部件。 If I move the whole scaffold to a stateful widget then the "onMenuTap" is not working.
如果我将整个脚手架移动到有状态的小部件,则“onMenuTap”不起作用。 The main purpose of the Question is to use the animated icon in the Flutter AppBar.
问题的主要目的是使用 Flutter AppBar 中的动画图标。
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../FreelanceTheme/AppStyleModeNotifier.dart';
class HomePage extends StatelessWidget with NavigationStates {
final Function onMenuTap;
const HomePage({Key key, this.onMenuTap}) : super(key: key);
@override
Widget build(BuildContext context) {
final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xffE5E5E5),
appBar: AppBar(
elevation: 0,
backgroundColor: appStyleMode.appBarBackgroundColor,
actions: <Widget>[
Switch(
activeColor: Colors.orange,
value: appStyleMode.mode,
onChanged: (value) => appStyleMode.switchMode(),
),
],
leading: IconButton(
tooltip: 'App Settings',
icon: Icon(
FontAwesomeIcons.bars,
color: Colors.white,
),
onPressed: onMenuTap,
),
centerTitle: true,
title: Text(
"Home",
style: TextStyle(
color: Colors.white,
),
),
),
body: FreelancingHomePage(),
),
);
}
}
I want to replace this IconButton with the animated icon in the appbar.我想用应用栏中的动画图标替换这个 IconButton。
leading: IconButton(
tooltip: 'App Settings',
icon: Icon(
FontAwesomeIcons.bars,
color: Colors.white,
),
onPressed: onMenuTap,
),
Following is the code for the animated icon.以下是动画图标的代码。 I want to use this animated icon in the above appBar.
我想在上面的 appBar 中使用这个动画图标。
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
AnimationController _animationIconController1,
bool isarrowmenu = false;
@override
void initState() {
super.initState();
_animationIconController1 = AnimationController(
vsync: this,
duration: Duration(milliseconds: 750),
reverseDuration: Duration(milliseconds: 750),
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
GestureDetector(
onTap: () {
setState(() {
isarrowmenu
? _animationIconController1.reverse()
: _animationIconController1.forward();
isarrowmenu = !isarrowmenu;
});
},
child: ClipOval(
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 2.5,
color: Colors.green,
),
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
width: 75,
height: 75,
child: Center(
child: AnimatedIcon(
icon: AnimatedIcons.arrow_menu,
progress: _animationIconController1,
color: Colors.red,
size: 60,
),
),
),
),
),
),
);
}
You can copy paste run full code below您可以在下面复制粘贴运行完整代码
Step 1: You can make this animated icon with StatefulWidget
that have VoidCallback onMenuTap
第 1 步:您可以使用具有
VoidCallback onMenuTap
StatefulWidget
制作此动画图标
class CustomIcon extends StatefulWidget {
VoidCallback onMenuTap;
CustomIcon({Key key, this.onMenuTap}) : super(key: key);
@override
_CustomIconState createState() => _CustomIconState();
}
class _CustomIconState extends State<CustomIcon> with TickerProviderStateMixin {
AnimationController _animationIconController1;
Step 2: In leading
, you can use CustomIcon
and pass onMenuTap
步骤2:在
leading
,你可以使用CustomIcon
并通过onMenuTap
home: HomePage(
onMenuTap: () {
print("hi");
},
),
...
leading: CustomIcon(
onMenuTap: () {
onMenuTap();
},
),
working demo工作演示
output of working demo工作演示的输出
I/flutter (25195): hi
I/flutter (25195): hi
full code完整代码
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomePage(
onMenuTap: () {
print("hi");
},
),
);
}
}
class HomePage extends StatelessWidget {
final Function onMenuTap;
const HomePage({Key key, this.onMenuTap}) : super(key: key);
@override
Widget build(BuildContext context) {
//final appStyleMode = Provider.of<AppStyleModeNotifier>(context);
return MaterialApp(
home: Scaffold(
backgroundColor: Color(0xffE5E5E5),
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.blue,
actions: <Widget>[
/* Switch(
activeColor: Colors.orange,
value: appStyleMode.mode,
onChanged: (value) => appStyleMode.switchMode(),
),*/
],
leading: CustomIcon(
onMenuTap: () {
onMenuTap();
},
),
centerTitle: true,
title: Text(
"Home",
style: TextStyle(
color: Colors.white,
),
),
),
body: Text("FreelancingHomePage()"),
),
);
}
}
class CustomIcon extends StatefulWidget {
VoidCallback onMenuTap;
CustomIcon({Key key, this.onMenuTap}) : super(key: key);
@override
_CustomIconState createState() => _CustomIconState();
}
class _CustomIconState extends State<CustomIcon> with TickerProviderStateMixin {
AnimationController _animationIconController1;
bool isarrowmenu = false;
@override
void initState() {
super.initState();
_animationIconController1 = AnimationController(
vsync: this,
duration: Duration(milliseconds: 750),
reverseDuration: Duration(milliseconds: 750),
);
}
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () {
setState(() {
isarrowmenu
? _animationIconController1.reverse()
: _animationIconController1.forward();
isarrowmenu = !isarrowmenu;
if (widget.onMenuTap != null) {
widget.onMenuTap();
}
});
},
child: ClipOval(
child: Container(
decoration: BoxDecoration(
border: Border.all(
width: 2.5,
color: Colors.green,
),
borderRadius: BorderRadius.all(
Radius.circular(50.0),
),
),
width: 75,
height: 75,
child: Center(
child: AnimatedIcon(
icon: AnimatedIcons.arrow_menu,
progress: _animationIconController1,
color: Colors.red,
size: 60,
),
),
),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.