How to format row in flutter?

Question

IM trying to figuring out how I can change my code thats its looking like that enter image description here

My looks like that enter image description here

And heres my code

    return Row(crossAxisAlignment: CrossAxisAlignment.start, children: [
      GestureDetector(
        onTap: () {
          DatbaseService.instance.createorGetConversation(uid, uid,
              (String _conversationID) {
            NavigationService.instance.navigateToRoute(
              MaterialPageRoute(builder: (context) {
                return MeineBeitraege(
                  _conversationID,
                  widget.uid,
                  widget.username,
                  widget.url,
                  widget.email,
                );
              }),
            );
          });
        },
        child: Container(
          child: ClipOval(
            child: Container(
                height: 35,
                width: 35,
                decoration: BoxDecoration(
                  color: Colors.white,
                ),
                child: widget.url != null && widget.url != 'profilepictureer'
                    ? Image.network(
                        widget.url,
                        fit: BoxFit.cover,
                      )
                    : Image.asset(
                        'assets/profilepictureer.png') // Your widget is here when image is no available.
                ),
          ),
          decoration: new BoxDecoration(
              shape: BoxShape.circle,
              border: new Border.all(color: Colors.black, width: 3)),
        ),
      ),
      Column(children: [
        RichText(
          text: TextSpan(
            text: widget.username, // _snapshot.data['username']
            style: TextStyle(fontWeight: FontWeight.bold, color: Colors.black),

            children: <InlineSpan>[
              WidgetSpan(
                  alignment: PlaceholderAlignment.baseline,
                  baseline: TextBaseline.alphabetic,
                  child: SizedBox(width: 4)),
              TextSpan(
                //"${comment.data()['comment']}"
                text: widget.comment,
                style: TextStyle(
                  fontWeight: FontWeight.normal,
                ),
              )
            ],
          ),
        ),
        Row(
          children: [
            Text(widget.timeago),
            SizedBox(width: 10),
            Text('${widget.commentlikes} likes'),
            SizedBox(width: 10),
            InkWell(
              onTap: () {
                widget.onTap();
                if (!widget.focusNode.hasPrimaryFocus) {
                  setState(() {
                    FocusScope.of(context).requestFocus(widget.focusNode);
                  });
                }
              },
              child: Text('Reply'),
            ),
          ],
        ),
           widget.commentcount != null && widget.commentcount > 0
            ? Container(
                child: Align(
                  alignment: Alignment.topCenter,
                  child: TextButton(
                    onPressed: () {},
                    style: TextButton.styleFrom(
                      primary: Colors.grey,
                    ),
                    child: InkWell(
                        onTap: () {
                          if (viewreplies) {
                            setState(() {
                              viewreplies = false;
                            });
                          } else {
                            setState(() {
                              viewreplies = true;
                            });
                          }
                        },
                        child: viewreplies == true
                            ? Text(
                                '———View replies(${widget.commentcount})',
                                style: TextStyle(fontSize: 13),
                              )
                            : Text(
                                '———Hide replies(${widget.commentcount})',
                                style: TextStyle(fontSize: 13),
                              )),
                  ),
                ),
              )
            : Container(),
     
      ]),
      
      const Spacer(),
      InkWell(
        onTap: () => likecomment(widget.commentdataid),
        child: widget.likes.contains(uid)
            ? Icon(
                Icons.star,
                size: 25,
                color: Colors.yellow,
              )
            : Icon(
                Icons.star_border_outlined,
                size: 25,
              ),
      )
    ]);

What I want then is the exact same function as instagram has like when tapping on ViewReplies I wanna show ht comments of the comments . Hope anyone can help .If you need more information please leave a comment

OK so heres my updated code . First a lsitviewbuidler

----- - - - -- 
return Listviewbuilder
---- - - - -
child: Column(children: [
                                          CommentsWidget(

Then the commentswidget is the Lisle seperat in a stateful

 @override
  Widget build(BuildContext context) {
    final wi = MediaQuery.of(context).size.width;
    return Column(
          children:[

           ListTile( -------)
-- - -- - - 
CommentsComments(),

CommentsComments() is the second listview again in a sepereat stateful with the second listtile

 @override
  Widget build(BuildContext context) {
return Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        child: Column(
          children: [
            Expanded(
   child: StreamBuilder(
        stream: FirebaseFirestore.instance
            .collection('videos')
            .doc(widget.videoid)
            .collection('comments')
            .doc(widget.id)
            .collection("commentcomment")
            .orderBy('time', descending: true)
            .snapshots(),
        builder: (BuildContext context, snapshot) {
          if (snapshot.hasData) {
            return SingleChildScrollView(
              child: Container(
                child: ListView.builder(
    --...
ListTile()

 

Answer 1

It is too late but it can help.

In Android Studio go to

File > Settings > Editor > Code Style > Dart

and increase the value of Line , my case increased the length to 500 then hit CTRL +ALT+L for Windows and Command + Option +L for MAC.

Answer 2

for creating an Instagram like comment section UI you can check the below code. I have added a hardcoded list for display purpose you can insert your own server data with logic to differentiate between both list views. For this UI I have created a normal comment object having all replies to that user in replies list such as

single user comment object
    {
          'name': 'person 1',
          'message': 'Some text message from person 1',
          'replies': [
            {
              'name': 'person 2',
              'message': 'Some text message from person 2',
            },
            {
              'name': 'person 3',
              'message': 'Some text message from person 3',
            },
          ]
        },

---

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  final List<dynamic> commentList = [
    {
      'name': 'person 1',
      'message': 'Some text message from person 1',
      'replies': [
        {
          'name': 'person 2',
          'message': 'Some text message from person 2',
        },
        {
          'name': 'person 3',
          'message': 'Some text message from person 3',
        },
      ]
    },
    {
      'name': 'person 4',
      'message': 'Some text message from person 4',
      'replies': []
    },
    {
      'name': 'person 5',
      'message': 'Some text message from person 5',
      'replies': [
        {
           'name': 'person 6',
          'message': 'Some text message from person 6',
        }
      ]
    }
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
        title: Text("Hello World"),),
        body: ListView.builder(
            padding: const EdgeInsets.all(0.0),
            shrinkWrap: true,
            itemCount: commentList.length,
            itemBuilder: (context, index) {
              return Column(children: [
                ListTile(
                  contentPadding: const EdgeInsets.symmetric(horizontal: 8.0),
                  title: Text(commentList[index]['name']),
                  leading: Icon(Icons.fiber_new),
                ),
                ListView.builder(
                    shrinkWrap: true,
                    physics: const NeverScrollableScrollPhysics(),
                    padding: const EdgeInsets.all(0.0),
                    itemCount: commentList[index]['replies'].length ?? 0,
                    itemBuilder: (context, i) {
                      return ListTile(
                        contentPadding:
                            const EdgeInsets.symmetric(horizontal: 24.0),
                         leading: Icon(Icons.pages),
                        title: Text(commentList[index]['replies'][i]['name'] ),
                      );
                    })
              ]);
            }));
  }
}

Run this cord in dartpad and refactor it according to your use.