Flutter & Dart Tips - Week In Review #17
Tags: flutter, dart, beginners, codenewbie
Published: 2021-10-03 02:39:50



Hello Reader,

This is it. This post is the last one of the weekly Flutter\Dart tips series. By the end of this post, The number of tips I shared with you will be more than 100 tips. Thanks for following me to this point. 

![100](https://media3.giphy.com/media/IwAZ6dvvvaTtdI8SD5/giphy.gif?cid=ecf05e473awqbwnfst6d6rjxtn0txdpnut6vup8lc8n7az7w&rid=giphy.gif&ct=g)

1- LongPressDraggable Widget is used to create a widget that can be dragged starting from LongPress. 

```dart

...
  
          LongPressDraggable(
            feedback: FlutterLogo(
              textColor: Colors.orange,
              size: 100,
              style: FlutterLogoStyle.stacked,
            ),
            child: FlutterLogo(
              textColor: Colors.green,
              size: 100,
              style: FlutterLogoStyle.stacked,
            ),
            onDragEnd: (details) {
              setState(() {
                final adjustment = MediaQuery.of(context).size.height -
                    constraints.maxHeight;
                _offset = Offset(
                    details.offset.dx, details.offset.dy - adjustment);
              });
            },
          ),

...

```

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

![LongPressDraggable](https://i.imgur.com/i6996uy.gif)



2- Baseline is a widget that positions its child according to the child's baseline.

```dart

...

    Center(
      child: Container(
        color: Colors.blue,
        height: 120.0,
        width: 120.0,
        child: Baseline(
          child: Container(
            color: Colors.red,
            height: 60.0,
            width: 60.0,
          ),
          baseline: 20.0,
          baselineType: TextBaseline.alphabetic,
        ),
      ),
    )

...

```

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

![Baseline](https://i.imgur.com/U3JBPSp.gif)

3- Banner widget displays a diagonal message above the corner of another widget.

```dart

...
  
    Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.yellow,
        height: 100,
        child: ClipRect(
          child: Banner(
            message: "hello",
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(
              color: Colors.yellow,
              height: 100,
              child: Center(
                child: Text("Hello, banner!"),
              ),
            ),
          ),
        ),
      ),
    )

...

```


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

![Banner](https://i.imgur.com/fQusuX0.gif)

4- BottomNavigationBar is a widget that's displayed at the bottom of an app for selecting among a small number of views, typically between three and five.

```dart

...
  
      bottomNavigationBar: BottomNavigationBar(
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Business',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.school),
            label: 'School',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.amber[800],
        onTap: _onItemTapped,
      ),

...

```

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

![bottomNavigationBar](https://i.imgur.com/bvpiT7O.gif)

5- IntrinsicWidth is a widget that sizes its child to the child's maximum intrinsic width.

```dart

...
  
 IntrinsicWidth(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: 200,
          height: 100,
          color: Colors.teal,
        ),
        Expanded(
          child: Container(
            width: 100,
            height: 100,
            color: Colors.red,
          ),
        ),
      ],
    ),
  )
...

```

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

![IntrinsicWidth](https://i.imgur.com/ixdMBAM.gif)

6- IntrinsicHeight Widget is a widget that sizes its child to the child’s intrinsic height.

```dart

...
  
  IntrinsicHeight(
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      children: [
        Container(
          width: 150,
          height: 100,
          color: Colors.teal,
        ),
        Container(
          width: 150,
          height: 200,
          color: Colors.red,
        )
      ],
    ),
  )
...

```

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

![IntrinsicHeight](https://i.imgur.com/dXyiRe2.gif)

Thank you. 👋🏻

> 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/@rayhennessy?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Ray Hennessy</a> on <a href="https://unsplash.com/s/photos/celebration?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>