Flutter Tutorials

Flutter app development tutorials


flutter – Slider label

main.dart


import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.blue),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample> {
  double _value = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xFFF5F5F5),
        appBar: AppBar(
            title: const Text("Flutter - Slider Label")
        ),
        body: bodyContent()
    );
  }


  bodyContent(){
    return Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "Value : ${_value.toInt()}",
            style: const TextStyle(
                color: Colors.pink,
                fontSize: 30
            ),
          ),
          Slider(
            value: _value,
            onChanged: (double value){
              setState(() {
                _value = value;
              });
            },
            min: 1,
            max: 100,
            divisions: 20,
            // show above the slider when the slider is active.
            label: "${_value.toInt()}",
          )
        ]
    );
  }
}

More flutter tutorials



About Me

Flutter Developer

Design a site like this with WordPress.com
Get started