Flutter+WebRTC Development Peer-to-Peer Encrypted Instant Messaging App–LoginScreen Login Interface Implementation

Based on Flutter+WebRTC, develop a peer-to-peer encrypted, cross-end, instant messaging APP to realize text, audio and video calls and chats, as well as support for pictures, short videos and other file transfer functions, and it is planned to support Windows and Android platforms. I am going to record my learning and practicing process, and at the same time share it with you, welcome to discuss and exchange together. This project is realized by using my spare time, and is updated from time to time. This post implements the LoginScreen login interface of APP.

Because we are going to develop a peer-to-peer encrypted instant messaging app, so we definitely need to know the IP address of the other party beforehand so that we can establish a connection, if we say that you have a fixed server, then it’s feasible to directly write dead to the app, but this is not the case that we consider.

In our APP, one party acts as the server and the other as the client to establish the connection. When the APP is opened, the server enters the IP and port as well as a customized username, opens the listening and waits for the client to connect. When the client opens the app, the server enters the IP and port of the server and customizes a username, and then initiates a connection request to the server to complete the connection establishment. Both the server and the client have to customize their own user name as their display identifier.

 primary background color

First of all set the background color of the login screen, the APP developed this time is a pink APP, the main color is pink, after all, who can not like pink? We use the Stack component combined with the pink Container component to give the APP a base and draw a pink background effect.

 Stack(
      children: [
        Container(
          color: const Color.fromARGB(255, 246, 212, 223),
        ),
    ],
);

 Status bar color

We can see that a whole pink background image has been drawn, but a bit of beauty is the status bar part, there is a layer of semi-transparent cover:

So let’s set the status bar color to be consistent with the background color. We can custom draw the status bar color by setting SystemChrome, statusBarIconBrightness to set the status bar icon color, and statusBarColor to set the status bar color. If you need to set the global status bar color, then put the setting code into the main function, if you only need to set some interfaces, then place the setting code into the Widget build(BuildContext context) {} function of a component.

SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      statusBarIconBrightness: Brightness.dark,
      // statusBarColor: Colors.transparent 
      statusBarColor: Color.fromARGB(255, 246, 212, 223), 
    );
SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle); 

 Layout of the login screen

The top half of the login screen holds the lottie animation and the bottom half holds the input box and login button. The bottom half is set to a white background with rounded corners. The outer layer is wrapped with the Column component, placing the animation component and login component vertically, and setting the rounded corners and background color in the Container component’s decoration.

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(),
       ),
     ),
 ],
),

Input box need to do some settings, we want the effect is to have a border of the input box, then we need to set the border of the input box, enabledBorder and focusedBorder correspond to the state of the input box to enable the state and get the focus on the state of the border style, set borderRadius to change the curvature of the border, set borderSide to change the color of the border, set width to change the thickness of the border, and set width to change the thickness of the border. Set borderRadius to change the border radius, borderSide to change the border color, and width to change the border thickness. Set the prompt character of the input box by labelText, set filled and fillColor to change the background color of the input box.

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),
 ),
),

 Login Button

Next is the implementation of the login button, we implement a pink gradient login button, gradient effect by the DecoratedBox to achieve, gradient color needs to be set LinearGradient, the starting color for Color.fromARGB(255, 238, 156, 167), the end of the color for Color.fromARGB ( 255, 255, 221, 225), the button is very simple, directly using the text button TextButton on it.

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: () {},
    ),
  ),
),