DEV Community

Cover image for Flutter & Dart Tips - Week In Review #17
Offline Programmer
Offline Programmer

Posted on

Flutter & Dart Tips - Week In Review #17

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

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


...

          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);
              });
            },
          ),

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

LongPressDraggable

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


...

    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,
        ),
      ),
    )

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Baseline

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


...

    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!"),
              ),
            ),
          ),
        ),
      ),
    )

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Banner

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.


...

      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,
      ),

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

bottomNavigationBar

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


...

 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,
          ),
        ),
      ],
    ),
  )
...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

IntrinsicWidth

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


...

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

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

IntrinsicHeight

Thank you. 👋🏻

Follow me on Twitter for more tips about #coding, #learning, #technology...etc.

Check my Apps on Google Play & Apple Store

Cover image Ray Hennessy on Unsplash

Discussion (0)