flutter_Study
flutter_Study copied to clipboard
文章动画三里面的demo,创建圆形按钮显示有问题
如图,圆形按钮显示异常,可以帮我看一下是什么问题吗
下面是代码
--HeroLoginWidget
import 'package:flutter/material.dart';
class HeroLoginWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return HeroLoginWidgetWidget();
}
}
class HeroLoginWidgetWidget extends State with SingleTickerProviderStateMixin {
bool isLogin = false;
@override
Widget build(BuildContext context) {
var loginBtnWidget;
if (isLogin) {
AnimationController animationController =
AnimationController(vsync: this, duration: Duration(seconds: 2));
Animation<Color> animation = Tween(begin: Colors.white, end: Colors.black)
.animate(animationController);
loginBtnWidget = CircularProgressIndicator(
backgroundColor: Colors.white,
valueColor: animation,
);
} else {
loginBtnWidget = Text(
'登录',
style: TextStyle(color: Colors.white),
);
}
final logo = Hero(
tag: 'hero',
child: CircleAvatar(
backgroundColor: Colors.transparent,
radius: 48.0,
child: Image.asset("assets/apple-logo.jpg"),
),
);
final userName = TextFormField(
keyboardType: TextInputType.emailAddress,
autofocus: false,
decoration: InputDecoration(
hintText: '请输入用户名',
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final password = TextFormField(
autofocus: false,
obscureText: true,
decoration: InputDecoration(
hintText: "请输入密码",
contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
border:
OutlineInputBorder(borderRadius: BorderRadius.circular(32.0))),
);
final loginButton = Padding(
padding: EdgeInsets.symmetric(vertical: 16.0),
child: Material(
borderRadius: BorderRadius.circular(30.0),
shadowColor: Colors.lightBlueAccent.shade100,
elevation: 5.0,
child: MaterialButton(
minWidth: 200.0,
height: 42.0,
onPressed: (){
},
color: Colors.lightBlueAccent,
child:loginBtnWidget,
),
),
);
final forgotLabel = FlatButton(
child: Text(
"忘记密码?",
style: TextStyle(color: Colors.black54),
),
onPressed: () {},
);
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text("HeroWidget"),
),
body: Center(
child: ListView(
padding: EdgeInsets.all(20.0),
children: <Widget>[
logo,
SizedBox(
height: 48.0,
),
userName,
SizedBox(
height: 8.0,
),
password,
SizedBox(height: 8.0),
password,
SizedBox(
height: 24.0,
),
loginButton,
forgotLabel
],
)));
}
}
```--main.dart
import 'package:flutter/material.dart';
import 'package:myfirstflutterapp/animation/hero_login_widget.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Welcome to Flutter',
theme: new ThemeData(primaryColor: Colors.blue),
home: HeroLoginWidget(),
);
}
}