Flutter 通话界面UI

Flutter 通话界面UI

源码下载链接，欢迎点赞下载与收藏。

上图为真

1. 首页部分代码如下：

 @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        // Image
        Image.asset(
          "assets/images/back_ground.jpg",
          fit: BoxFit.cover,
        ),
        // Black Layer
        DecoratedBox(
          decoration: BoxDecoration(color: Colors.black.withOpacity(0.3)),
        ),
        Padding(
          padding: const EdgeInsets.all(20.0),
          child: SafeArea(
            child: Padding(
              padding: EdgeInsets.only(left: 5, right: 5, top: 30,bottom: 30),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Container(
                    //
                    child: Column(
                      children: [
                        Text(
                          "九霄",
                          style: Theme.of(context)
                              .textTheme
                              .headline3!
                              .copyWith(color: Colors.white),
                        ),
                        Text(
                          "寅虎 04:30".toUpperCase(),
                          style: TextStyle(
                              color: Colors.white.withOpacity(0.6),
                              fontSize: 12
                          ),
                        ),
                      ],
                    ),
                  ),
                  Spacer(),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: [
                      RoundedButton(
                        press: () {},
                        iconSrc: "assets/icons/Icon Mic.svg",
                      ),
                      RoundedButton(
                        press: () {
                          Navigator.push(context, MaterialPageRoute(builder: (_) => ScreenPage()));
                        },
                        color: Colors.red,
                        iconColor: Colors.white,
                        iconSrc: "assets/icons/call_end.svg",
                      ),
                      RoundedButton(
                        press: () {},
                        iconSrc: "assets/icons/Icon Volume.svg",
                      ),
                    ],
                  ),
                ],
              ),
            )
          ),
        ),
      ],
    );
  }

Github下载链接：

https://github.com/AlexLingFan/Alex_Calling_UI

欢迎点赞下载收藏。