How to fit in Grid Layout using Expanded widget

surajpunemaha commented 1 year ago

Hello, I want to fit CircularPercentIndicator under GridView.builder list item.

Below is my Sample code and output.

_buildLeaveDetailsGrid()
  {
    var _leaveDetailsList = GridView.builder(
      shrinkWrap: true,
      itemCount: listLeaveBalance.length,
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          crossAxisSpacing: 1,
          mainAxisSpacing: 1,
          //mainAxisExtent: 260,
          childAspectRatio: 0.80
      ),
      itemBuilder: (context, index)
      {
        return Card(
          margin: const EdgeInsets.all(3),
          elevation: 2,
          clipBehavior: Clip.hardEdge,
          shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(15.0),
          ),
          child: Column(
            children: [
              Container(
                padding: const EdgeInsets.all(5),
                child: getListHeaderText(listLeaveBalance[index].leaveTitle, Colors.black, textAlign: TextAlign.center),
              ),
              Expanded(
                child: Container(
                  child: CircularPercentIndicator(
                    radius: 60.0,
                    circularStrokeCap: CircularStrokeCap.round,
                    lineWidth: 10.0,
                    percent: 0.5,
                    animation: true,
                    center: new Text("100%"),
                    progressColor: Colors.green,
                  ),
                ),
              ),
              GestureDetector(
                child: Container(
                  child: Container(
                    width: double.infinity,
                    color: primaryColor,
                    padding: const EdgeInsets.all(10),
                    child: getH3NormalText(Strings.apply, Colors.white, textAlign: TextAlign.center),
                  ),
                ),
                onTap: ()
                {

                },
              ),
            ],
          ),
        );
      },
    );

    return _leaveDetailsList;
  }

Screenshot_1670827750

diegoveloper commented 1 year ago

Remove the Expanded Widget

On Mon, Dec 12, 2022, 1:54 AM surajpunemaha @.***> wrote:

Hello, I want to fit CircularPercentIndicator under GridView.builder list item.

Below is my Sample code and output.

_buildLeaveDetailsGrid() { var _leaveDetailsList = GridView.builder( shrinkWrap: true, itemCount: listLeaveBalance.length, gridDelegate: SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 2, crossAxisSpacing: 1, mainAxisSpacing: 1, //mainAxisExtent: 260, childAspectRatio: 0.80 ), itemBuilder: (context, index) { return Card( margin: const EdgeInsets.all(3), elevation: 2, clipBehavior: Clip.hardEdge, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(15.0), ), child: Column( children: [ Container( padding: const EdgeInsets.all(5), child: getListHeaderText(listLeaveBalance[index].leaveTitle, Colors.black, textAlign: TextAlign.center), ), Expanded( child: Container( child: CircularPercentIndicator( radius: 60.0, circularStrokeCap: CircularStrokeCap.round, lineWidth: 10.0, percent: 0.5, animation: true, center: new Text("100%"), progressColor: Colors.green, ), ), ), GestureDetector( child: Container( child: Container( width: double.infinity, color: primaryColor, padding: const EdgeInsets.all(10), child: getH3NormalText(Strings.apply, Colors.white, textAlign: TextAlign.center), ), ), onTap: () {
            },
          ),
        ],
      ),
    );
  },
);

return _leaveDetailsList;
}

— Reply to this email directly, view it on GitHub https://github.com/diegoveloper/flutter_percent_indicator/issues/186, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABFL3UAZMHAGK7MMY2NSAQTWM3D3VANCNFSM6AAAAAAS3R2RYU . You are receiving this because you are subscribed to this thread.Message ID: @.***>

surajpunemaha commented 1 year ago

Thanks for your reply

I removed Expanded widget and set radius: 45.0 to CircularPercentIndicator

It looks fine on Normal screen, but on Tab it left too much space around. Please see below screenshots of Mobile screen and tab screen respectively.

ss_on_mobile

ss_on_tab

How can I manage it to fit it on any screen.

diegoveloper commented 1 year ago

diegoveloper / flutter_percent_indicator

How to fit in Grid Layout using Expanded widget #186