Flutter中如何改变小部件在列或行中的显示顺序

Question

I'm creating a basic chat app, in there I'm using a row widget. The row widget should change the order of displaying the circleavatar.

1. in detail, the current user's image must be on the start of the row
2. and the rest users' userimage must be at the end of the row.

I'm able to display that by using bool isme variable and outputting using the "array if", but I want to know is there any other way to achieve this in a more efficient way.

I mean to change the order of the arrangment of the widgets in the row

and below is what I coded...

 import 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget {
 final String message;
 final bool isme;
 final String imageUrl;
 final Key key;
 final String username;
 ChatBubble(
   this.message,
   this.isme,
   this.username,
   this.imageUrl, {
   this.key,
 });
 @override
 Widget build(BuildContext context) {
   Size size = MediaQuery.of(context).size;
   var hei = size.height;
   var wid = size.width;
   return Row(
     crossAxisAlignment: CrossAxisAlignment.center,
     mainAxisAlignment: isme ? MainAxisAlignment.end : MainAxisAlignment.start,
     children: [
       if (isme) customCircleimage(),
       Column(
         crossAxisAlignment:
             isme ? CrossAxisAlignment.end : CrossAxisAlignment.start,
         children: [
           Padding(
             padding: EdgeInsets.only(
               right: isme ? 12.0 : 0.0,
               left: isme ? 0.0 : 12.0,
             ),
             child: Text(
               username,
             ),
           ),
           Container(
             height: hei * 0.1,
             width: wid * 0.5,
             padding: EdgeInsets.symmetric(
               vertical: hei * 0.015,
               horizontal: wid * 0.025,
             ),
             margin: EdgeInsets.symmetric(
               vertical: hei * 0.0015,
             ),
             alignment: Alignment.center,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(20.0),
                 topRight: Radius.circular(20.0),
                 bottomLeft: !isme ? Radius.zero : Radius.circular(20.0),
                 bottomRight: isme ? Radius.zero : Radius.circular(20.0),
               ),
               color: isme ? Colors.grey : Colors.pink,
             ),
             child: Text(
               message,
               softWrap: true,
               style: TextStyle(
                 color: Colors.white,
                 fontSize: 20.0,
               ),
             ),
           ),
         ],
       ),
       if (!isme) customCircleimage(),
     ],
   );
 }

 Widget customCircleimage() {
   return CircleAvatar(
     backgroundColor: Colors.black,
     backgroundImage: NetworkImage(
       imageUrl,
     ),
     radius: 25.0,
   );
 }
}

Answer 1

You just need to toggle the isMe condition. Have a look in below code.

import 'package:flutter/material.dart';

class ChatBubble extends StatelessWidget {
 final String message;
 final bool isme;
 final String imageUrl;
 final Key key;
 final String username;
 ChatBubble(
   this.message,
   this.isme,
   this.username,
   this.imageUrl, {
   this.key,
 });
 @override
 Widget build(BuildContext context) {
   Size size = MediaQuery.of(context).size;
   var hei = size.height;
   var wid = size.width;
   return Row(
     crossAxisAlignment: CrossAxisAlignment.center,
     mainAxisAlignment: isme ? MainAxisAlignment.end : MainAxisAlignment.start,
     children: [
       if (!isme) customCircleimage(),
       Column(
         crossAxisAlignment:
             isme ? CrossAxisAlignment.end : CrossAxisAlignment.start,
         children: [
           Padding(
             padding: EdgeInsets.only(
               right: isme ? 12.0 : 0.0,
               left: isme ? 0.0 : 12.0,
             ),
             child: Text(
               username,
             ),
           ),
           Container(
             height: hei * 0.1,
             width: wid * 0.5,
             padding: EdgeInsets.symmetric(
               vertical: hei * 0.015,
               horizontal: wid * 0.025,
             ),
             margin: EdgeInsets.symmetric(
               vertical: hei * 0.0015,
             ),
             alignment: Alignment.center,
             decoration: BoxDecoration(
               borderRadius: BorderRadius.only(
                 topLeft: Radius.circular(20.0),
                 topRight: Radius.circular(20.0),
                 bottomLeft: !isme ? Radius.zero : Radius.circular(20.0),
                 bottomRight: isme ? Radius.zero : Radius.circular(20.0),
               ),
               color: isme ? Colors.grey : Colors.pink,
             ),
             child: Text(
               message,
               softWrap: true,
               style: TextStyle(
                 color: Colors.white,
                 fontSize: 20.0,
               ),
             ),
           ),
         ],
       ),
       if (isme) customCircleimage(),
     ],
   );
 }

 Widget customCircleimage() {
   return CircleAvatar(
     backgroundColor: Colors.black,
     backgroundImage: NetworkImage(
       imageUrl,
     ),
     radius: 25.0,
   );
 }
}