DEV Community

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

Posted on

Flutter & Dart Tips - Week In Review #16

Hello Reader,

I am getting very close to the goal of this series of sharing 100+ Flutter\Dart tips. Let's get into the 16th post of this.

15

1- Transform is a widget that applies a transformation before painting its child.


...

  Container(
  color: Colors.black,
  child: Transform(
    alignment: Alignment.topRight,
    transform: Matrix4.skewY(0.3)..rotateZ(-math.pi / 12.0),
    child: Container(
      padding: const EdgeInsets.all(8.0),
      color: const Color(0xFFE8581C),
      child: const Text('Apartment for rent!'),
    ),
  ),
)

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RadioListTile

2- VerticalDivider widget is a one device pixel thick vertical line, with padding on either side.


...


Row(
  mainAxisSize: MainAxisSize.min,
  children: <Widget>[
    Container(
      child: Text('Item1')
    ),
    VerticalDivider(),
    Container(
      child: Text('Item2'),
    ),
    VerticalDivider(),
    Container(
      child: Text('Item3'),
    ),
  ],
)

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RangeSlider

3- TimePicker widget shows a dialog containing a material design time picker.


...


Future<TimeOfDay> selectedTime = showTimePicker(
  initialTime: TimeOfDay.now(),
  context: context,
);

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RefreshIndicator

4- Stepper widget displays progress through a sequence of steps.


...


    Stepper(
          steps: [
            Step(
              title: new Text('Login Info'),
              content: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Email Address'),
                  ),
                  TextFormField(
                    decoration: InputDecoration(labelText: 'Password'),
                  ),
                ],
              ),
              isActive: true,
              state: StepState.editing
            ),
          ],
        )

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Switch

5- ActionChip widget used to create compact elements called chips, which trigger an action when the user presses on it.


...


  ActionChip(
    label: Text('Delete'),
    onPressed: () {
      print('Processing to delete item');
    }
  )

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Tooltip

6- ExpansionPanel widget is a panel with a header and a body and can be either expanded or collapsed. The body of the panel is only visible when it is expanded.


...


        ExpansionPanel(
          headerBuilder: (context, isExpanded) {
            return ListTile(
              title: Text(
                'Click To Expand',
                style: TextStyle(color: Colors.black),
              ),
            );
          },
          body: ListTile(
            title: Text('Description text',
                style: TextStyle(color: Colors.black)),
          ),
          isExpanded: _expanded,
          canTapOnHeader: true,
        ),

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

SelectableText

See you next week. 👋🏻

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

Check my Apps on Google Play & Apple Store

Cover image XPS on Unsplash

Discussion (0)