DEV Community

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

Posted on

Flutter & Dart Tips - Week In Review #15

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

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


...

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

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RadioListTile

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


...

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

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RangeSlider

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


...

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

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

RefreshIndicator

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


...

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

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Switch

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


...

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

...

Enter fullscreen mode Exit fullscreen mode

Try it on DartPad here

Tooltip

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


...

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

...

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 UX Indonesia on Unsplash

Discussion (0)