Flutter & Dart Tips - Week In Review #16
Tags: dart, flutter, beginners, codenewbie
Published: 2021-09-25 23:15:35



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](https://media0.giphy.com/media/i37WrmQJTF1M2lVI00/giphy.gif?cid=ecf05e471myjnkpzubvbt55w6mgngzurhiev51gmiiyb26ee&rid=giphy.gif&ct=s)

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

```dart

...
  
  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!'),
    ),
  ),
)

...

```

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

![RadioListTile](https://i.imgur.com/Wmpuoau.gif)



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

```dart

...
  

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

...

```

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

![RangeSlider](https://i.imgur.com/8C73sRM.gif)

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

```dart

...
  

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

...

```


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

![RefreshIndicator](https://i.imgur.com/ffhuD6r.gif)

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

```dart

...
  

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

...

```

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

![Switch](https://i.imgur.com/4tueYOn.gif)

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

```dart

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

...

```

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

![Tooltip](https://i.imgur.com/LdrFds5.gif)

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.

```dart

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

...

```

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

![SelectableText](https://i.imgur.com/5U9DIYL.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/@xps?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">XPS</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>