Flutter & Dart Tips - Week In Review #14
Tags: beginners, dart, flutter, codenewbie
Published: 2021-09-12 01:03:21


Hello Reader,

In this 14th post of the Flutter & Dart Tips series, I will add six more tips to the 80 tips I shared since June of this year.

![14](https://media.giphy.com/media/412dM09vTOltutIwhq/giphy.gif)

1- Flow is a widget which arranges its child widgets based on FlowDelegate

```dart

...
  
    Flow(
      delegate: FlowMenuDelegate(menuAnimation: menuAnimation),
      children:
          menuItems.map<Widget>((IconData icon) => flowMenuItem(icon)).toList(),
    )

...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=a67c355c62725999d6a417a0eb685b45&null_safety=true">here</a> 

![Spacer](https://i.imgur.com/zIkOlV3.gif)



2- You can fix Text Overflow error with Flexible Widget

```dart

...
  
      Flexible(
        child: Text(
          'Flutter Text Overflow while adding long text. how to wrap text in flutter ',
          style: TextStyle(fontSize: 20),
        ),
      )

...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=fb82031cdedbe6c9abf91348fb54e780&null_safety=true">here</a> 

![FractionallySizedBox](https://i.imgur.com/D3iVDCf.gif)

3- CheckboxListTile is a widget that combines a checkbox and a list tile. It allows you to create a checkbox along with the title, subtitle, and icon.

```dart

...
  
  CheckboxListTile(
    value: _isChecked,
    onChanged: (bool value) {
      setState(() {
        _isChecked = value;
      });
    },
  )

...

```


> Try it on DartPad <a href="https://dartpad.dev/?id=389130de4f57c93cba50fe242f3ea03b&null_safety=true">here</a> 

![AnimatedSwitcher](https://i.imgur.com/2Q6Q3o1.gif)

4- LinearProgressIndicator widget is a material design linear progress indicator.

```dart

...
  
    LinearProgressIndicator(
      value: controller.value,
      semanticsLabel: 'Linear progress indicator',
    ),

...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=bd83a2b0a37b825cee7ed54dba841b08&null_safety=true">here</a> 

![CupertinoAlertDialog](https://i.imgur.com/RwHABYE.gif)

5- PageView is a scrollable list that works page by page.

```dart

...
  
    PageView(
      children: <Widget>[
        Container(
          color: Colors.pink,
          child: Center(
            child: Text('Page 1'),
          ),
        ),
        Container(
          color: Colors.cyan,
          child: Center(
            child: Text('Page 2'),
          ),
        ),
        Container(
          color: Colors.deepPurple,
          child: Center(
            child: Text('Page 3'),
          ),
        ),
      ],
    )

...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=eab388bf8e1a404b738a669f31fd0e84&null_safety=true">here</a> 

![CupertinoButton](https://i.imgur.com/KfnRZHp.gif)

6- PhysicalModel widget allows you to add custom shadow effects and customize its color and shape

```dart

...
  

    PhysicalModel(
      elevation: 6.0,
      shape: BoxShape.rectangle,
      shadowColor: Colors.black,
      color: Colors.white,
      child: Container(
        height: 120.0,
        width: 120.0,
        color: Colors.blue[50],
        child: FlutterLogo(
          size: 60,
        ),
      ),
    )

...

```

> Try it on DartPad <a href="https://dartpad.dev/?id=15e63520f768302b0fa01e1ac36405d9&null_safety=true">here</a> 

![CupertinoActionSheet](https://i.imgur.com/xQSnzTh.gif)

See you next week. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a> & <a href="https://apple.co/3hZXoBx">Apple Store</a>

<span>Cover image<a href="https://unsplash.com/@miracleday?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Elena Mozhvilo</a> on <a href="https://unsplash.com/s/photos/numbers?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </span>