Flutter+WebRTC开发点对点加密即时通讯APP--主界面和信息设置界面

开篇

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

跳转按钮

前边实现了登录界面，现在在登录界面的start按钮实现页面跳转，当点击按钮后，跳转到我们的主界面。我们使用ValueListenableBuilder来监听按钮点击情况，当点击start按钮后，将loginflag设置为ture，触发页面重绘，将login页面替换成我们的主页面。

dart 复制代码

var loginflag = ValueNotifier<bool>(false);
 ValueListenableBuilder(
  builder: (BuildContext context, value, Widget? child) {
    return value == true ? const MainPage() : const LoginPage();
  },
  valueListenable: loginflag,
),

主界面与底部导航栏

主界面我们放置两个子界面，分别是好友列表和个人信息设置界面。因为主界面背景颜色是白色，所以我们要将状态栏颜色改成透明的以适应白色主题颜色。

子界面的跳转我们还是使用ValueNotifier来实现，首先定义pages来存放我们的好友列表界面和信息设置界面。在bottomNavigationBar底部导航栏中我们放置两个按钮，点击按钮时通过修改pageindex来触发页面重绘吗，实现页面跳转，同时改变图标颜色和文字颜色。注意，要使用有状态组件，这样才能setState。

dart 复制代码

var pageindex = ValueNotifier<int>(0);
var pages = [
  const FriendsList(),
  const Setting(),
];
class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
        statusBarIconBrightness: Brightness.dark, //状态栏图标颜色（Android）
        statusBarColor: Colors.transparent //状态栏透明
        );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); //状态栏设置
    return Scaffold(
      body: ValueListenableBuilder(
        builder: (BuildContext context, value, Widget? child) {
          return pages[pageindex.value];
        },
        valueListenable: pageindex,
      ),
      bottomNavigationBar: SizedBox(
        height: 75,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Expanded(
              child: Column(
                children: [
                  SizedBox(
                    width: 200,
                    child: IconButton(
                      onPressed: () {
                        pageindex.value = 0;
                        setState(() {});
                      },
                      icon: Icon(
                        Icons.chat_bubble_outline,
                        color: pageindex.value == 0
                            ? const Color.fromARGB(255, 238, 156, 167)
                            : Colors.grey.withAlpha(200),
                      ),
                    ),
                  ),
                  Text(
                    "Chat",
                    style: TextStyle(
                      fontSize: 12,
                      color: pageindex.value == 0
                          ? const Color.fromARGB(255, 238, 156, 167)
                          : Colors.grey.withAlpha(200),
                    ),
                  )
                ],
              ),
            ),
            Expanded(
                。。。
            ),
          ],
        ),
      ),
    );
  }
}

信息设置界面

现在来实现信息设置界面，在这个界面我们可以对我们的头像和名称进行设置，界面的布局很简单，从上到下依次放置头像、名称修改文本输入框，保存按钮。

头像显示部分我们使用Badge组件和CircleAvatar组件结合绘制，Badge可以实现提示小圆点，这里放置更换头像的功能按钮。CircleAvatar可以实现头像圆形裁切效果，radius可以控制头像的大小。

dart 复制代码

headpic() {
  return const Badge(
    //圆点显示
    alignment: Alignment.bottomRight,
    largeSize: 30,
    label: Icon(
      Icons.add,
      color: Color.fromARGB(255, 251, 171, 180),
    ),
    backgroundColor: Colors.white,
    child: CircleAvatar(
      //图片圆形剪裁
      radius: 70, //圆形大小
      backgroundColor: Colors.white, //背景颜色设置为白色
      backgroundImage: AssetImage(
        "assets/5.jpg", //头像图片
      ),
    ),
  );
}

名称更改输入框就很容易实现了，我们直接拿前边登录界面的输入框过来用就可以了，只需要修改labelText提示文字即可。边框样式记得将enabledBorder和focusedBorder一起修改，文本框填充颜色记得配置filled才会生效。

dart 复制代码

nameinput() {
  return Container(
    padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
    height: 64,
    width: 375,
    child: TextField(
      decoration: InputDecoration(
        enabledBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.white,
          ),
        ),
        focusedBorder: const OutlineInputBorder(
          borderSide: BorderSide(
            color: Colors.white,
          ),
        ),
        labelText: "You Name",
        labelStyle: TextStyle(
          color: Colors.grey.withAlpha(200),
        ),
        filled: true,
        fillColor: Colors.white.withAlpha(180),
      ),
    ),
  );
}

保存按钮我们也是拿前边登录界面的按钮过来用就行了，渐变色和圆角都与前边的按钮一模一样。容器的宽度这里稍微短缩一点，按钮文字修改成save。

dart 复制代码

editbutton() {
  return Container(
    padding: const EdgeInsets.fromLTRB(0, 10, 0, 20),
    width: 220,
    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,
          ),
          "Save",
        ),
        onPressed: () {},
      ),
    ),
  );
}

最终效果图：