Flutter & Dart Tips - Week In Review #15
Tags: dart, flutter, beginners, codenewbie
Published: 2021-09-18 22:54:16



Hello Reader,

Welcome to the 15th post in the "Week In Review" series, where I share the Flutter\Dart tips I tweeted last week.

![15](https://media.giphy.com/media/9jnyNoY27Cu7vt8GBl/giphy.gif?cid=ecf05e475k2ry6uv34wb7w8q2xr735fn6v7ib0teqbzo3lan&rid=giphy.gif&ct=s)

1- RadioListTile widget is a radio button with a label.

```dart

...
  
        RadioListTile<SingingCharacter>(
          title: const Text('Thomas Jefferson'),
          value: SingingCharacter.jefferson,
          groupValue: _character,
          onChanged: (SingingCharacter value) { setState(() { _character = value; }); },
      ),
  
...

```

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

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



2- RangeSlider widget is used to select a range from a range of values.

```dart

...
  
      RangeSlider(
      values: _currentRangeValues,
      min: 0,
      max: 100,
      divisions: 5,
      labels: RangeLabels(
        _currentRangeValues.start.round().toString(),
        _currentRangeValues.end.round().toString(),
      ),
      onChanged: (RangeValues values) {
        setState(() {
          _currentRangeValues = values;
        });
      },
    );
  
...

```

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

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

3- RefreshIndicator is a widget that supports Material's swipe-to-refresh.

```dart

...
  
        RefreshIndicator(
          onRefresh: () async {
            return await Future.delayed(Duration(seconds: 3));
          },
          child: ListView(
            padding: const EdgeInsets.all(8.0),
            children: <Widget>[
              Container(
                height: 50,
                color: Colors.amber[600],
                child: const Center(child: Text('Entry A')),
              ),
              Container(
                height: 50,
                color: Colors.amber[500],
                child: const Center(child: Text('Entry B')),
              ),
              Container(
                height: 50,
                color: Colors.amber[100],
                child: const Center(child: Text('Entry C')),
              ),
            ],
          ),
        ),
  
...

```


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

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

4- Switch widget  is used to toggle the on/off state of a single setting.

```dart

...
  
          Switch(
            value: isSwitched,
            onChanged: (value) {
              setState(() {
                isSwitched = value;
                print(isSwitched);
              });
            },
            activeTrackColor: Colors.lightGreenAccent,
            activeColor: Colors.green,
          ),
  
...

```

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

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

5- Tooltip widget  helps explaining the function of a button or other user interface action.

```dart

...
  
    Tooltip(
      message: 'I am a Tooltip',
      child: Text('Hover over the text to show a tooltip.'),
    );
  
...

```

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

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

6- SelectableText Widget allows the user to Select/Copy the content on the UI.

```dart

...
  
  const SelectableText(
    'Hello! How are you?',
    textAlign: TextAlign.center,
    style: TextStyle(fontWeight: FontWeight.bold),
  )
  
...

```

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

![SelectableText](https://i.imgur.com/i7KabqI.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/@uxindo?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">UX Indonesia</a> on <a href="https://unsplash.com/t/business-work?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
  </span>