How to build a color picker (Slider type) in Flutter without using any package?

Question

I want to make a color picker slider/bar in flutter without using any pub dev package,just need that slider.Can anyone give me a basic idea that how this can be build ?

I have tried many ways but it seems i can't achieve without any external package

Answer 1

This can help you get an idea on how to do it.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorSlider(),
    );
  }
}

class ColorSlider extends StatefulWidget {
  @override
  _ColorSliderState createState() => _ColorSliderState();
}

class _ColorSliderState extends State<ColorSlider> {
  double _sliderValue = 0.0;
  Color _selectedColor = Colors.red;

  void _updateColor(double value) {
    int index = (value * (timelineColors.length - 1)).round();
    setState(() {
      _sliderValue = value;
      _selectedColor = timelineColors[index];
    }); 
 }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Color Slider Example'),
      ),
      body: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 300,
              height: 10,
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15),
                gradient: LinearGradient(
                  colors: timelineColors,
                  stops: timelineStops,
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                ),
              ),
              child: Slider(
                value: _sliderValue,
                onChanged: _updateColor,
                min: 0,
                max: 1,
                activeColor: Colors.transparent,
                inactiveColor: Colors.transparent,
              ),
            ),
            const SizedBox(height: 20),
            const Text(
              'Selected Color:',
              style: TextStyle(fontSize: 18),
            ),
            const SizedBox(height: 10),
            Container(
              width: 100,
              height: 50,
              color: _selectedColor,
            ),
          ],
        ),
      ),
    );
  }
}

List<Color> timelineColors = [
  Colors.red,
  Colors.blue,
  Colors.green,
  Colors.yellow,
  Colors.purple,
];

List<double> timelineStops = [
  0.0,
  0.25,
  0.5,
  0.75,
  1.0,
];

Being this the final result. As I mentioned earlier, it is only an idea... you can customize the slider as you wish.