What Does the Shrink Wrap Property Does In Flutter ??

· 3 min read
What Does the Shrink Wrap Property Do In Flutter
What Does the Shrink Wrap Property Do In Flutter

ListView Widget is one of the important widget types that can be used anywhere. So in this article, we will go through what does the Shrink Wrap Property does in the flutter.

What Does the Shrink Wrap Property Do In Flutter?

Usually, a ListView, as well as GridView, PageView, and CustomScrollView try to fill all the available space given by the parent element, even when the list items would require less space.

With shrinkWrap: true, you can change this behavior so that the ListView only occupies the space it needs.

Take a look at this Example:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(),
        body: Center(
          child: Container(
            margin: EdgeInsets.all(32),
            decoration: BoxDecoration(border: Border.all(color: Colors.red)),
            child: ListView(
              shrinkWrap: false,
              children: <Widget>[
                ListTile(title: Text('Item 1')),
                ListTile(title: Text('Item 2')),
                ListTile(title: Text('Item 3')),
              ],
            ),
          ),
        ),
      ),
    );
  }
}

With shrinkWrap: false

Shrink Wrap in listview
Shrink Wrap in listview

With shrinkWrap: true

shrinkwrap flutter
shrinkwrap flutter

If you do not set the shrinkWrap property, your ListView will be as big as its parent. If you set it to true, the list will wrap its content and be as big as its children allow it to be.

Every ScrollView (ListView, GridView, CustomScrollView) have a shrinkWrap property for determining the size of scrollDirection.

So ScrollView’s scrollDirection can have 02 sizes.

  • Same size as parent size.
  • Same size as content size (All children size).

If ScrollView’s shrinkWrap: false, Then ScrollView’s scrollDirection size is the same size as the parent size.

If the ScrollView’s shrinkWrap: true, Then ScrollView’s scrollDirection size is the same size as Content size All children size.

Conclusion:

Keep Learning, Keep Fluttering!!!

In this article, we have been through what does the Shrink Wrap Property does in flutter ??

Stay connected for Topics like flutter shrink container, flutter singlechildscrollview scroll to the bottom, flutter singlechildscrollview full height, customscrollview shrinkwrap, singlechildscrollview flutter, column shrink wrap flutter, etc.

Do not forget to drop your valuable suggestions/feedback. We would love to assist you.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portals dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Leave a Reply