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

实现一个个人名片效果:


效果图

基本用到了学过的一些 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: [
            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: [
                Icon(Icons.email, color: Colors.grey[400],),
                SizedBox(width: 5),
                Text("[email protected]", style: TextStyle(color: Colors.blue[200], fontSize: 15, letterSpacing: 1.0),)
              ],
            ),
        ],
    ),
    ),
    );
  }
}

你可能感兴趣的:([Flutter] 实战 demo - 实现个人名片)