美文网首页Flutter
[Flutter] 实战 demo - 实现个人名片

[Flutter] 实战 demo - 实现个人名片

作者: BudSwift | 来源:发表于2020-08-05 09:33 被阅读0次

    实现一个个人名片效果:


    效果图

    基本用到了学过的一些 widget 和布局容器

    
    class CardHome extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          backgroundColor: Colors.grey[900],
          appBar: AppBar(
            title: Text("Flutter 笔记"),
            centerTitle: true,
            backgroundColor: Colors.grey[850],
          ),
          body: Padding(
            padding: EdgeInsets.fromLTRB(30, 40, 30, 0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Center(
                  child: CircleAvatar(
                    backgroundImage: NetworkImage("https://upload.jianshu.io/users/upload_avatars/6245111/ba1ea0f4-ec28-46e2-838f-c9d3a54054ad.png?imageMogr2/auto-orient/strip|imageView2/1/w/120/h/120"),
                    radius: 40,
                  ),
                ),
                Divider(
                  height: 60,
                  color: Colors.grey[800],
                ),
                Text("姓名", style: TextStyle(
                    color: Colors.grey,
                    letterSpacing: 2,
                  )
                ),
                SizedBox(height: 10,),
                Text("Brook", style: TextStyle(
                  color: Colors.amberAccent,
                  fontWeight: FontWeight.bold,
                  fontSize: 28.0,
                )
                ),
                SizedBox(height: 30),
                Text("公司", style: TextStyle(
                  color: Colors.grey,
                  letterSpacing: 2,
                )
                ),
                SizedBox(height: 10,),
                Text("宇宙无敌科技", style: TextStyle(
                  color: Colors.amberAccent,
                  fontWeight: FontWeight.bold,
                  fontSize: 28.0,
                )
                ),
                SizedBox(height: 30),
                Text("岗位", style: TextStyle(
                  color: Colors.grey,
                  letterSpacing: 2,
                )
                ),
                SizedBox(height: 10,),
                Text("优秀的 UI 开发者", style: TextStyle(
                  color: Colors.amberAccent,
                  fontWeight: FontWeight.bold,
                  fontSize: 28.0,
                  letterSpacing: 2.0,
                ),
                ),
                SizedBox(height: 30),
                Row(
                  children: <Widget>[
                    Icon(Icons.email, color: Colors.grey[400],),
                    SizedBox(width: 5),
                    Text("cirpxpp@163.com", style: TextStyle(color: Colors.blue[200], fontSize: 15, letterSpacing: 1.0),)
                  ],
                ),
            ],
        ),
        ),
        );
      }
    }
    

    相关文章

      网友评论

        本文标题:[Flutter] 实战 demo - 实现个人名片

        本文链接:https://www.haomeiwen.com/subject/locnrktx.html