flutter_Study icon indicating copy to clipboard operation
flutter_Study copied to clipboard

文章动画三里面的demo,创建圆形按钮显示有问题

Open jelly-cai opened this issue 7 years ago • 0 comments

image 如图,圆形按钮显示异常,可以帮我看一下是什么问题吗 下面是代码 --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(),
    );
  }
}

jelly-cai avatar Oct 16 '18 03:10 jelly-cai