CODEWITHSUNDEEP
flutterflutter-listview
Xander
Xander

Reputation: 9171

Flutter Listview with rounded corners

I'm trying to create a listview with rounded corners in Flutter. I thought I might have been on the right track by adding a ClipRRect wrapped around the listview. However, when I did so only the top corners were rounded, the bottom ones were not, I assume this is because the listview did not have enough rows to take up the full screen, but the ClipRRect, must be taking up the full scren width.

What's the best way to add rounded corners to the listview widget?

Upvotes: 1

Views: 7537

Answers (5)

JJan1999
JJan1999

Reputation: 1

while there are already many solution provided, they werent as good for my usecase as i wanted to keep the feedback animation that is automatically added for listTiles and most solutions add a colored background that is cut off.

So here is my solution:

ListTile(
     shape: const RoundedRectangleBorder(
           borderRadius: BorderRadius.only(
                topLeft: Radius.circular(16),
                topRight: Radius.circular(16)),
           ),
     leading: Padding(
         padding: const EdgeInsets.only(left: 16.0, right: 16.0),
             child: SvgPicture.asset(
                      AppImages.whatsappIcon,
                      width: 24,
                      color: sharedPreferences?.getBool('darkMode') ?? false
                          ? LightAppColors.black
                          : DarkAppColors.yourMsgBoxTextColor,
         ),
     ),
     title: Text(
         'shareWhatsapp',
         style: TextStyle(
             color: DarkAppColors.yourMsgBoxTextColor,
             fontSize: 16,
             fontFamily: 'THICCCBOI',
             fontWeight: FontWeight.w600,
         ),
     ),
     onTap: () => {openwhatsapp(context)},
 ),

this way each of your listtiles can have a customly defined borderradius and you can keep any of the standard listview behaviours

Upvotes: 0

ArvinT
ArvinT

Reputation: 525

I like to create constants in a separate file for the BoxDecoration and other hard-coded values e.g.

    const kCards = BorderRadius.only(
  bottomLeft: Radius.circular(5),
  bottomRight: Radius.circular(5),
  topLeft: Radius.circular(20),
  topRight: Radius.circular(20),
);

And then call the const kCards in the decoration: kCards, It makes your code much cleaner and of course follows DRY-Do not Repeat Yourself.

If you want to make any adjustments to specific buttons/tiles etc use

e.g....

gradientButton.copyWith(color: Colors.blue),
borderRadius.copyWith(bottomLeft: Radius.circular(20),),

Another example but with hard-coded values

          ListTile(
            title: TextField(
              controller: _email,
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ),
          ),

ListView specific Example with ClipRect

          ListView(
            shrinkWrap: true,
            children: [
              ClipRect(
                child: TextField(
                  controller: _email,
                  decoration: const InputDecoration(
                    labelText: 'Email',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              const SizedBox(height: 10),
              ClipRect(
                child: TextField(
                  controller: _password,
                  obscureText: true,
                  decoration: const InputDecoration(
                    labelText: 'Password',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              const SizedBox(height: 10),
            ],
          ),

Upvotes: 1

Nitin Gadhiya
Nitin Gadhiya

Reputation: 427

https://gist.github.com/Nitingadhiya/5f2020d2f3d3258d0ff95280e025062f

//List-view-border-radius-example.dart
// Border-bottom-left
// Border-bottom-right
// Border all


import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: ListBuilder(),
    );
  }
}

class ListBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              borderRadius:
                  const BorderRadius.only(bottomLeft: Radius.circular(85.0)),
              color: Colors.amber[600],
            ),
            height: 50,
            child: const Center(child: Text('Entry A')),
          ),
          Container(
            height: 50,
            decoration: BoxDecoration(
              borderRadius:
                  const BorderRadius.only(bottomRight: Radius.circular(85.0)),
              color: Colors.amber[500],
            ),
            child: const Center(child: Text('Entry B')),
          ),
          Container(
            height: 50,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(85.0)),
              color: Colors.amber[100],
            ),
            child: const Center(child: Text('Entry C')),
          ),
        ],
      ),
    );
  }
}

Upvotes: 1

Md. Yeasin Sheikh
Md. Yeasin Sheikh

Reputation: 63749

Wrap your ListView with SizedBoxand provide size.

body: LayoutBuilder(
  builder: (context, constraints) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(12.0),
      child: SizedBox(
        height: constraints.maxHeight,//based on your need
        width: constraints.maxWidth, 
        child: ListView.builder(

Upvotes: 1

Mahesh Gv
Mahesh Gv

Reputation: 1103

try this for round corners with list.

Container(
    decoration: BoxDecoration(
            border: Border.all(
                color: Color(0xFFF05A22),
                style: BorderStyle.solid,
                width: 1.0,
            ),
            color: Color(0xFFF05A22),
            borderRadius: BorderRadius.circular(30.0),
        ),
    child:ListView(
    children: new List.generate(
        100,
        (index) => Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Text("data $index"),
                  Divider(),
                ])),
  ),
    )

Upvotes: 3

Related Questions