Connect with us

How to Design Comment Section with Reply, Like, and Unlike UI in Flutter

kizinho

Published

3 years ago

on

Follow
DEVELOPER PROGRAMMING: How to Design Comment Section with Reply, Like, and Unlike UI in Flutter [New Developer Programming] » Naijacrawl
Photo: Naijacrawl
Download zip 2.22 Kb

site

Hi, Folks I will share my journey to flutter when am designing naijacrawl, I made a nice looking comment section with like and reply and I want to share with you guys to see how I did it in Flutter.

Flutter is an open-source mobile SDK developer that can use to build native-looking Android and iOS applications from the same code base. Flutter has been around since 2015 when Google introduced it and remained in the beta stage before its official launch in December 2018.

I made this nice looking comment section that works in both Andriod and IOS will also attach the zip file that you can easily download and test run it. Below is the code snippet and downloadable zip file.


Plugins needed to install via pubspec.yaml

google_fonts: ^2.0.0

cached_network_image: ^3.0.0

Code Snippet

import 'package:cached_network_image/cached_network_image.dart';

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';




class CommentPost extends StatefulWidget {




  @override

  _CommentPostState createState() => _CommentPostState();

}




class _CommentPostState extends State<CommentPost> {

  var show = false;

  @override

  Widget build(BuildContext context) {

    return Column(

      crossAxisAlignment: CrossAxisAlignment.start,

      children: [

        InkWell(

          child: Text(

            "Write a comment...",

            style: GoogleFonts.roboto(

              fontSize: 16,

              color: Theme.of(context).disabledColor,

            ),

          ),

          onTap: () => print('load comment input screen'),

        ),

        Divider(

          thickness: 0.5,

          color: Theme.of(context).disabledColor,

        ),

        SizedBox(

          height: 20,

        ),

        //list comments

        Card(

          margin: EdgeInsets.zero,

          shape: RoundedRectangleBorder(

            borderRadius: BorderRadius.only(

              topLeft: Radius.circular(12.0),

              topRight: Radius.circular(12.0),

            ),

          ),

          color: Theme.of(context).cardColor,

          elevation: 0.8,

          child: Container(

            constraints: BoxConstraints(

              maxHeight: double.infinity,

            ),

            margin: EdgeInsets.only(right: 16, left: 16),

            child: ListView(

              padding: EdgeInsets.only(top: 20),

              shrinkWrap: true,

              children: [

                Container(

                  margin: EdgeInsets.only(bottom: 4),

                  child: Row(

                    crossAxisAlignment: CrossAxisAlignment.start,

                    mainAxisAlignment: MainAxisAlignment.spaceBetween,

                    children: [

                      Text.rich(

                        TextSpan(

                          children: [

                            WidgetSpan(

                              child: Container(

                                margin: EdgeInsets.only(right: 8.0),

                                width: 20,

                                height: 20,

                                decoration: new BoxDecoration(

                                  borderRadius: BorderRadius.circular(100),

                                  image: new DecorationImage(

                                    image: CachedNetworkImageProvider(

                                      // ApiRoutes.postImageUrl + 'https://naijacrawl.com/logo/logo.webp',

                                      'https://naijacrawl.com/logo/logo.webp',

                                      scale: 1.0,

                                    ),

                                    fit: BoxFit.fill,

                                  ),

                                ),

                              ),

                            ),

                            TextSpan(

                              text: "Albert Flores",

                              style: GoogleFonts.roboto(

                                  fontSize: 16,

                                  color: Theme.of(context).highlightColor),

                            ),

                          ],

                        ),

                      ),

                      Text(

                        "3 mins ago",

                        style: Theme.of(context).textTheme.headline3,

                      ),

                    ],

                  ),

                ),

                Text(

                  "kizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet, consectetur lit ut yeskizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet,",

                  style: GoogleFonts.roboto(

                      fontSize: 14, color: Theme.of(context).disabledColor),

                  textAlign: TextAlign.left,

                ),

                Container(

                  margin: EdgeInsets.only(bottom: 10, top: 10),

                  child: Row(

                    mainAxisAlignment: MainAxisAlignment.spaceBetween,

                    children: [

                      InkWell(

                        child: Text(

                            '6 replies',




                            style: GoogleFonts.roboto(fontSize: 12,

                                color: show ? Colors.blue :  Theme.of(context).disabledColor)

                        ),

                        onTap: (){

                          setState(() {

                            if(show == true){

                              show = false;

                            }else{

                              show = true;

                            }

                          });




                        },

                      ),

                      Text.rich(

                        TextSpan(

                          style: Theme.of(context).textTheme.button,

                          children: [

                            WidgetSpan(

                              child: Container(

                                padding: EdgeInsets.only(right: 2.0),

                                child: Icon(

                                  Icons.thumb_down,

                                  size: 15.0,

                                  color: Colors.red,

                                ),

                              ),

                            ),

                            TextSpan(

                                text: "3",

                                style: GoogleFonts.roboto(

                                    fontSize: 14, color: Colors.red)),

                          ],

                        ),

                      ),

                      Text.rich(

                        TextSpan(

                          style: Theme.of(context).textTheme.button,

                          children: [

                            WidgetSpan(

                              child: Container(

                                padding: EdgeInsets.only(right: 2.0),

                                child: Icon(

                                  Icons.thumb_up,

                                  size: 15.0,

                                  color: Theme.of(context).buttonColor,

                                ),

                              ),

                            ),

                            TextSpan(

                                text: "3",

                                style: GoogleFonts.roboto(

                                    fontSize: 14,

                                    color: Theme.of(context).buttonColor)),

                          ],

                        ),

                      ),

                      Text.rich(

                        TextSpan(

                          style: Theme.of(context).textTheme.button,

                          children: [

                            WidgetSpan(

                              child: Container(

                                padding: EdgeInsets.only(right: 2.0),

                                child: Icon(

                                  Icons.reply,

                                  size: 15.0,

                                  color: Colors.blue,

                                ),

                              ),

                            ),

                            TextSpan(

                                text: "Reply",

                                style: GoogleFonts.roboto(

                                    fontSize: 14, color: Colors.blue)),

                          ],

                        ),

                      ),

                    ],

                  ),

                ),

              ],

            ),

          ),

        ),

        //child comment

        if(show == true)

          Container(

            margin: EdgeInsets.only(left: 20),

            width: MediaQuery.of(context).size.width,

            child:  Card(

              margin: EdgeInsets.zero,

              shape: RoundedRectangleBorder(

                borderRadius: BorderRadius.only(

                  bottomLeft: Radius.circular(12.0),

                  bottomRight: Radius.circular(12.0),

                ),

              ),

              color: Theme.of(context).cardColor,

              elevation: 0.8,

              child: Container(

                constraints: BoxConstraints(

                  maxHeight: double.infinity,

                ),

                margin: EdgeInsets.only(right: 16, left: 16),

                child: ListView(

                  padding: EdgeInsets.only(top: 20),

                  shrinkWrap: true,

                  children: [

                    Container(

                      margin: EdgeInsets.only(bottom: 4),

                      child: Row(

                        crossAxisAlignment: CrossAxisAlignment.start,

                        mainAxisAlignment: MainAxisAlignment.spaceBetween,

                        children: [

                          Text.rich(

                            TextSpan(

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    margin: EdgeInsets.only(right: 8.0),

                                    width: 20,

                                    height: 20,

                                    decoration: new BoxDecoration(

                                      borderRadius: BorderRadius.circular(100),

                                      image: new DecorationImage(

                                        image: CachedNetworkImageProvider(

                                          // ApiRoutes.postImageUrl + 'https://naijacrawl.com/logo/logo.webp',

                                          'https://naijacrawl.com/logo/logo.webp',

                                          scale: 1.0,

                                        ),

                                        fit: BoxFit.fill,

                                      ),

                                    ),

                                  ),

                                ),

                                TextSpan(

                                  text: "Albert Flores",

                                  style: GoogleFonts.roboto(

                                      fontSize: 16,

                                      color: Theme.of(context).highlightColor),

                                ),

                              ],

                            ),

                          ),

                          Text(

                            "3 mins ago",

                            style: Theme.of(context).textTheme.headline3,

                          ),

                        ],

                      ),

                    ),

                    Text(

                      "kizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet, consectetur lit ut yeskizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet,",

                      style: GoogleFonts.roboto(

                          fontSize: 14, color: Theme.of(context).disabledColor),

                      textAlign: TextAlign.left,

                    ),

                    Container(

                      margin: EdgeInsets.only(bottom: 10, top: 10),

                      child: Row(

                        mainAxisAlignment: MainAxisAlignment.spaceBetween,

                        children: [

                          Text(

                            '6 replies',

                            style: Theme.of(context).textTheme.headline3,

                          ),

                          Text.rich(

                            TextSpan(

                              style: Theme.of(context).textTheme.button,

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    padding: EdgeInsets.only(right: 2.0),

                                    child: Icon(

                                      Icons.thumb_down,

                                      size: 15.0,

                                      color: Colors.red,

                                    ),

                                  ),

                                ),

                                TextSpan(

                                    text: "3",

                                    style: GoogleFonts.roboto(

                                        fontSize: 14, color: Colors.red)),

                              ],

                            ),

                          ),

                          Text.rich(

                            TextSpan(

                              style: Theme.of(context).textTheme.button,

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    padding: EdgeInsets.only(right: 2.0),

                                    child: Icon(

                                      Icons.thumb_up,

                                      size: 15.0,

                                      color: Theme.of(context).buttonColor,

                                    ),

                                  ),

                                ),

                                TextSpan(

                                    text: "3",

                                    style: GoogleFonts.roboto(

                                        fontSize: 14,

                                        color: Theme.of(context).buttonColor)),

                              ],

                            ),

                          ),

                          Text.rich(

                            TextSpan(

                              style: Theme.of(context).textTheme.button,

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    padding: EdgeInsets.only(right: 2.0),

                                    child: Icon(

                                      Icons.reply,

                                      size: 15.0,

                                      color: Colors.blue,

                                    ),

                                  ),

                                ),

                                TextSpan(

                                    text: "Reply",

                                    style: GoogleFonts.roboto(

                                        fontSize: 14, color: Colors.blue)),

                              ],

                            ),

                          ),

                        ],

                      ),

                    ),

                  ],

                ),

              ),

            ),

          ),

        if(show == true)

          Container(

            margin: EdgeInsets.only(left: 20),

            width: MediaQuery.of(context).size.width,

            child: Divider(

              height: 0,

              thickness: 0.5,

              color: Theme.of(context).disabledColor,

            ),

          ),

        if(show == true)

          Container(

            margin: EdgeInsets.only(left: 20),

            width: MediaQuery.of(context).size.width,

            child:  Card(

              margin: EdgeInsets.zero,

              shape: RoundedRectangleBorder(

                borderRadius: BorderRadius.only(

                  bottomLeft: Radius.circular(12.0),

                  bottomRight: Radius.circular(12.0),

                ),

              ),

              color: Theme.of(context).cardColor,

              elevation: 0.8,

              child: Container(

                constraints: BoxConstraints(

                  maxHeight: double.infinity,

                ),

                margin: EdgeInsets.only(right: 16, left: 16),

                child: ListView(

                  padding: EdgeInsets.only(top: 20),

                  shrinkWrap: true,

                  children: [

                    Container(

                      margin: EdgeInsets.only(bottom: 4),

                      child: Row(

                        crossAxisAlignment: CrossAxisAlignment.start,

                        mainAxisAlignment: MainAxisAlignment.spaceBetween,

                        children: [

                          Text.rich(

                            TextSpan(

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    margin: EdgeInsets.only(right: 8.0),

                                    width: 20,

                                    height: 20,

                                    decoration: new BoxDecoration(

                                      borderRadius: BorderRadius.circular(100),

                                      image: new DecorationImage(

                                        image: CachedNetworkImageProvider(

                                          // ApiRoutes.postImageUrl + 'https://naijacrawl.com/logo/logo.webp',

                                          'https://naijacrawl.com/logo/logo.webp',

                                          scale: 1.0,

                                        ),

                                        fit: BoxFit.fill,

                                      ),

                                    ),

                                  ),

                                ),

                                TextSpan(

                                  text: "Albert Flores",

                                  style: GoogleFonts.roboto(

                                      fontSize: 16,

                                      color: Theme.of(context).highlightColor),

                                ),

                              ],

                            ),

                          ),

                          Text(

                            "3 mins ago",

                            style: Theme.of(context).textTheme.headline3,

                          ),

                        ],

                      ),

                    ),

                    Text(

                      "kizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet, consectetur lit ut yeskizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                          "amet,",

                      style: GoogleFonts.roboto(

                          fontSize: 14, color: Theme.of(context).disabledColor),

                      textAlign: TextAlign.left,

                    ),

                    Container(

                      margin: EdgeInsets.only(bottom: 10, top: 10),

                      child: Row(

                        mainAxisAlignment: MainAxisAlignment.spaceBetween,

                        children: [

                          Text(

                            '6 replies',

                            style: Theme.of(context).textTheme.headline3,

                          ),

                          Text.rich(

                            TextSpan(

                              style: Theme.of(context).textTheme.button,

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    padding: EdgeInsets.only(right: 2.0),

                                    child: Icon(

                                      Icons.thumb_down,

                                      size: 15.0,

                                      color: Colors.red,

                                    ),

                                  ),

                                ),

                                TextSpan(

                                    text: "3",

                                    style: GoogleFonts.roboto(

                                        fontSize: 14, color: Colors.red)),

                              ],

                            ),

                          ),

                          Text.rich(

                            TextSpan(

                              style: Theme.of(context).textTheme.button,

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    padding: EdgeInsets.only(right: 2.0),

                                    child: Icon(

                                      Icons.thumb_up,

                                      size: 15.0,

                                      color: Theme.of(context).buttonColor,

                                    ),

                                  ),

                                ),

                                TextSpan(

                                    text: "3",

                                    style: GoogleFonts.roboto(

                                        fontSize: 14,

                                        color: Theme.of(context).buttonColor)),

                              ],

                            ),

                          ),

                          Text.rich(

                            TextSpan(

                              style: Theme.of(context).textTheme.button,

                              children: [

                                WidgetSpan(

                                  child: Container(

                                    padding: EdgeInsets.only(right: 2.0),

                                    child: Icon(

                                      Icons.reply,

                                      size: 15.0,

                                      color: Colors.blue,

                                    ),

                                  ),

                                ),

                                TextSpan(

                                    text: "Reply",

                                    style: GoogleFonts.roboto(

                                        fontSize: 14, color: Colors.blue)),

                              ],

                            ),

                          ),

                        ],

                      ),

                    ),

                  ],

                ),

              ),

            ),

          ),

        //endchild comment

        SizedBox(

          height: 15,

        ),

        Card(

          margin: EdgeInsets.zero,

          shape: RoundedRectangleBorder(

            borderRadius: BorderRadius.only(

              topLeft: Radius.circular(12.0),

              topRight: Radius.circular(12.0),

            ),

          ),

          color: Theme.of(context).cardColor,

          elevation: 0.8,

          child: Container(

            constraints: BoxConstraints(

              maxHeight: double.infinity,

            ),

            margin: EdgeInsets.only(right: 16, left: 16),

            child: ListView(

              padding: EdgeInsets.only(top: 20),

              shrinkWrap: true,

              children: [

                Container(

                  margin: EdgeInsets.only(bottom: 4),

                  child: Row(

                    crossAxisAlignment: CrossAxisAlignment.start,

                    mainAxisAlignment: MainAxisAlignment.spaceBetween,

                    children: [

                      Text.rich(

                        TextSpan(

                          children: [

                            WidgetSpan(

                              child: Container(

                                margin: EdgeInsets.only(right: 8.0),

                                width: 20,

                                height: 20,

                                decoration: new BoxDecoration(

                                  borderRadius: BorderRadius.circular(100),

                                  image: new DecorationImage(

                                    image: CachedNetworkImageProvider(

                                      // ApiRoutes.postImageUrl + 'https://naijacrawl.com/logo/logo.webp',

                                      'https://naijacrawl.com/logo/logo.webp',

                                      scale: 1.0,

                                    ),

                                    fit: BoxFit.fill,

                                  ),

                                ),

                              ),

                            ),

                            TextSpan(

                              text: "Albert Flores",

                              style: GoogleFonts.roboto(

                                  fontSize: 16,

                                  color: Theme.of(context).highlightColor),

                            ),

                          ],

                        ),

                      ),

                      Text(

                        "3 mins ago",

                        style: Theme.of(context).textTheme.headline3,

                      ),

                    ],

                  ),

                ),

                Text(

                  "kizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet, consectetur lit ut yesLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet, consectetur lit ut yeskizLorem ipsum dolor sit amet, consectetur lit ut... Lorem ipsum dolor sit "

                      "amet,",

                  style: GoogleFonts.roboto(

                      fontSize: 14, color: Theme.of(context).disabledColor),

                  textAlign: TextAlign.left,

                ),

                Container(

                  margin: EdgeInsets.only(bottom: 10, top: 10),

                  child: Row(

                    mainAxisAlignment: MainAxisAlignment.spaceBetween,

                    children: [

                      Text(

                        '6 replies',

                        style: Theme.of(context).textTheme.headline3,

                      ),

                      Text.rich(

                        TextSpan(

                          style: Theme.of(context).textTheme.button,

                          children: [

                            WidgetSpan(

                              child: Container(

                                padding: EdgeInsets.only(right: 2.0),

                                child: Icon(

                                  Icons.thumb_down,

                                  size: 15.0,

                                  color: Colors.red,

                                ),

                              ),

                            ),

                            TextSpan(

                                text: "3",

                                style: GoogleFonts.roboto(

                                    fontSize: 14, color: Colors.red)),

                          ],

                        ),

                      ),

                      Text.rich(

                        TextSpan(

                          style: Theme.of(context).textTheme.button,

                          children: [

                            WidgetSpan(

                              child: Container(

                                padding: EdgeInsets.only(right: 2.0),

                                child: Icon(

                                  Icons.thumb_up,

                                  size: 15.0,

                                  color: Theme.of(context).buttonColor,

                                ),

                              ),

                            ),

                            TextSpan(

                                text: "3",

                                style: GoogleFonts.roboto(

                                    fontSize: 14,

                                    color: Theme.of(context).buttonColor)),

                          ],

                        ),

                      ),

                      Text.rich(

                        TextSpan(

                          style: Theme.of(context).textTheme.button,

                          children: [

                            WidgetSpan(

                              child: Container(

                                padding: EdgeInsets.only(right: 2.0),

                                child: Icon(

                                  Icons.reply,

                                  size: 15.0,

                                  color: Colors.blue,

                                ),

                              ),

                            ),

                            TextSpan(

                                text: "Reply",

                                style: GoogleFonts.roboto(

                                    fontSize: 14, color: Colors.blue)),

                          ],

                        ),

                      ),

                    ],

                  ),

                ),

              ],

            ),

          ),

        ),

      ],

    );

  }

}

Hope this will be helpful to you and like my journey to flutter.

Click Here To Comment

Download File 2.22 Kb 103


site


kizinho

Adike Kizito is a top-rated software developer, blogger, sports, and entertainment lover. He is the CEO of these popular websites Naijacrawl.com and Mp3ager.com. He operates his software developing task through Kizzsoft.com,... Read More

Continue Reading
1 Comment

1 Comment


    Leave a Reply

    Your email address will not be published. Required fields are marked *

    How to use the same Guard name in WEB and API Using Laravel Spatie Permission

    kizinho

    Published

    4 years ago

    on

    NEWS: How to use the same Guard name in WEB and API Using Laravel Spatie Permission [New Developer] » Naijacrawl
    Photo: Naijacrawl
    Hi, Folks will show how to use the same guard name on your Laravel application using Laravel Spatie Permission without creating multiple guards for your web and API when building your real projects.Spatie Permission comes with guard name it is used to authenticate user role and permission in your laravel app. But what if you have Role and Permission with Guard Name Web, it means only web can use this permission or role, when you want to use it for API to Authorize...
    Continue Reading

    Laravel 6.0 - 6.4 - how to fix str_slug and str_limit with any other helpers function

    kizinho

    Published

    5 years ago

    on

    NEWS: Laravel 6.0 - 6.4 - how to fix str_slug and str_limit with any other helpers function [New Developer] » Naijacrawl
    Photo: Naijacrawl
    Hi folks, since laravel 6.0 removed many things like make Auth and Helpers functions. Before you can use them you need to install their packages.You can use helper function like str_slug, which is used to create a slug and str_limit, which is used to set a limit of a string. Today will you how you can make use of it by just installing a package for helper function composer require laravel/helpers That's all you need and start using the helper functions like you a...
    Continue Reading

    How to Download Instagram Photo and Video using PHP (easy way)

    kizinho

    Published

    5 years ago

    on

    DEVELOPER PROGRAMMING: How to Download Instagram Photo and Video using PHP (easy way) [New Developer Programming] » Naijacrawl
    Photo: Naijacrawl
    Hi folks, this script is really cool for those of you that want to get informations like photos and videos from Instagram, this tool is for you. Assuming you are working on a project that needs to get data from Instagram just follow these steps and get it done. Step 1 Download this package using the following command  composer requireayeshinstagram-download  Step 2  Set your Instagram photo or video URLs as show below  getDownloadUrl(); // Returns the download URL....
    Continue Reading

    Latest

    DEVELOPER PROGRAMMING: How to update Python from 2.7 to 3.7 in CentOs/WHM [New Developer Programming] » Naijacrawl
    2 years ago 1.4K

    How to update Python from 2.7 to 3.7 in CentOs/WHM

    DEVELOPER PROGRAMMING: Laravel 9.18.0 New Features Detailed [New Developer Programming] » Naijacrawl
    2 years ago 1.7K

    Laravel 9.18.0 New Features Detailed

    DEVELOPER PROGRAMMING: Learn Flutter Bloc State Management Using This Complete Video Course [New Developer Programming] » Naijacrawl
    3 years ago 1.4K

    Learn Flutter Bloc State Management Using This Complete Video Course


  1.

    NC NEWSLETTER

    Download Naijacrawl App today

    Fastest way to read on the go

    Download the Naijacrawl App.