Flutter+WebRTC开发点对点加密即时通讯APP--LoginScreen登录界面实现

开篇

基于Flutter+WebRTC，开发一款点对点加密、跨端、即时通讯APP，实现文字、音视频通话聊天，同时支持图片、短视频等文件传输功能，计划支持Windows、Android平台。我准备将自己的学习和实践过程记录下来，同时分享给大家，欢迎大家一起研讨交流。这个工程是利用自己的业余时间来实现的，不定时更新。本篇文章实现APP的LoginScreen登录界面。

因为我们要开发的是点对点加密即时通讯APP，所以我们事先肯定要知道对方的IP地址，这样才能建立连接，如果说你有固定的服务器，那么直接写死到APP也是可行的，但这不是我们考虑的情况。

在我们的APP中，建立连接的双方一方充当服务器，一方作为客户端，开启APP时，服务端输入IP和端口以及自定义的用户名，开启监听，等待客户端的连接。客户端开启时输入服务器的IP和端口，再自定义一个自己的用户名，然后向服务器端发起连接请求，完成连接建立。服务端和客户端都要自定义自己的用户名，作为自己的显示标识。

主背景颜色

首先设置一下登录界面的背景色，此次开发的APP是粉色系的APP，主要颜色是粉色，毕竟谁能不喜欢粉色呢？我们使用 Stack组件结合粉色的Container组件来给APP打个底，绘制出粉色的背景效果。

dart 复制代码

 Stack(
      children: [
        Container(
          color: const Color.fromARGB(255, 246, 212, 223), //背景颜色
        ),
    ],
);

状态栏颜色

我们可以看到，一整块粉色的背景图已经绘制出来了，但是有点美中不足，就是状态栏部分，还有一层半透明的遮着：

那么我们接下来就对状态栏颜色进行设置，让他和背景颜色一致，我们可以通过设置SystemChrome来对状态栏颜色进行自定义绘制，statusBarIconBrightness可以设置状态栏图标颜色，statusBarColor可以设置状态栏颜色。如果需要设置全局的状态栏颜色，那么就将设置代码放到main函数中，如果只需要设置某些界面，那么就将设置代码放置到某个组件的Widget build(BuildContext context) {}函数中。

dart 复制代码

SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark, //状态栏图标颜色（Android）
      // statusBarColor: Colors.transparent //状态栏透明
      statusBarColor: Color.fromARGB(255, 246, 212, 223), //状态栏的颜色
    );
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); //状态栏设置

登录界面布局

登录界面的上半部分放置lottie动画，下半部分放置输入框和登录按钮。下半部分设置为白色背景，并设置圆角。外层使用 Column组件包裹，将动画组件和登录组件竖向放置，在Container组件的decoration中设置圆角和背景颜色。

dart 复制代码

Column(
     children: [
       Expanded(
         flex: 1,
         child: Lottie.asset('assets/girl.json'), //lottie动画
       ),
       Expanded(
         flex: 1,
         child: Container(
           alignment: Alignment.center,
           decoration: const BoxDecoration(
             //背景圆角形状
             color: Color.fromARGB(255, 250, 250, 250), //背景颜色
             borderRadius: BorderRadius.only(
               //设置圆角
               topLeft: Radius.circular(48),
               topRight: Radius.circular(48),
             ),
           ),
           child: const LoginText(),
       ),
     ),
 ],
),

输入框

输入框需要做一些设置，我们想要的效果是有边框的输入框，那么就要设置输入框的边框，enabledBorder和focusedBorder分别对应输入框启用状态和获得焦点状态下的边框样式，设置borderRadius改变边框弧度，设置borderSide改变边框颜色，设置width改变边框粗细。通过labelText设置输入框提示字符，设置filled和fillColor改变输入框背景颜色。

dart 复制代码

TextField(  
 decoration: InputDecoration(//边框样式
   //启用状态下边框样式
   enabledBorder: OutlineInputBorder(
     //设置边框弧度
     /*borderRadius: BorderRadius.all(
        Radius.circular(10),
     ),*/
     borderSide: BorderSide(
       //设置边框的颜色
       color: Colors.grey.withAlpha(50),
       //设置边框的粗细
       //width: 2.0,
     ),
   ),
   //获得焦点状态下边框样式
   focusedBorder: OutlineInputBorder(
     borderSide: BorderSide(
       color: Colors.grey.withAlpha(50),
     ),
   ),
   labelText: "Server IP",
   labelStyle: TextStyle(
     color: Colors.grey.withAlpha(150),
   ),
   filled: true, //输入框背景颜色
   fillColor: Colors.white.withAlpha(180), //输入框背景颜色
 ),
),

登录按钮

接下来是登录按钮的实现，我们实现一个粉色渐变的登录按钮，渐变效果由DecoratedBox来实现，渐变颜色需要设置LinearGradient吗，起始颜色为 Color.fromARGB(255, 238, 156, 167)，结束颜色为 Color.fromARGB(255, 255, 221, 225),按钮就很简单，直接使用文字按钮TextButton就可以了。

dart 复制代码

Container(
  padding: const EdgeInsets.fromLTRB(0, 10, 0, 20),
  width: 300,
  child: DecoratedBox(
    //渐变色背景
    decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(14), //圆角
      gradient: const LinearGradient(
        colors: [
          Color.fromARGB(255, 238, 156, 167),
          Color.fromARGB(255, 255, 221, 225),
        ],
      ),
    ),
    child: TextButton(
      child: const Text(
        style: TextStyle(
          color: Colors.white,
          fontSize: 20,
        ),
        "start",
      ),
      onPressed: () {},
    ),
  ),
),

Flutter+WebRTC开发点对点加密即时通讯APP--LoginScreen登录界面实现

Flutter+WebRTC开发点对点加密即时通讯APP--LoginScreen登录界面实现

开篇

主背景颜色

状态栏颜色

登录界面布局

输入框

登录按钮

最终效果图