Running Syncfusion Flutter Sliders on Flutterflow?

user1051849
December 31, 2022
246 views
0 votes
2 Answers

I’m trying to get this widget up and running on flutterflow using a mixture of boilerplate and example code but I keep getting errors that make me think I may be missing a/some dependencies. I’m about 3 days into using dart/flutter so please forgive me if I’m missing something pretty basic!

Here’s my custom widget code:

import 'package:syncfusion_flutter_sliders/sliders.dart';

class NewCustomWidget extends StatefulWidget {
  const NewCustomWidget({
    Key? key,
    this.width,
    this.height,
    this.value,
  }) : super(key: key);

  final double? width;
  final double? height;
  final double? value;

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

// dynamic setState;

class _NewCustomWidgetState extends State<NewCustomWidget> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: SfSlider(),
        ),
      ),
    );
  }
}

double _value = 40.0;

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: const Text('Syncfusion Flutter Slider'),
    ),
    body: SfSlider(
      min: 0.0,
      max: 100.0,
      value: _value,
      interval: 20,
      showTicks: true,
      showLabels: true,
      enableTooltip: true,
      minorTicksPerInterval: 1,
      onChanged: (dynamic value) {
        setState(() {
          _value = value;
        });
      },
    ),
  );
}

And my dependencies are here:

And my defined parameters are here:

The errors I’m getting are these…

the named parameter ‘onChange’ is required, but there’s no corresponding argument. Try adding the required argument.

Same thing for value (which I’ve added as a parameter in the interface) and setState parameters.

Is there some setup I’m missing or something basic?

Answers

You have used the slider widget two times in your code. The errors that you are getting are related to the first slider which does not have the required parameter. Also, you should not create a widget build context without a class or function, It will remain as dead code because it can not be accessed. I made the required changes in your code.

Full Code : –

import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_sliders/sliders.dart';

void main() {
  runApp(const NewCustomWidget());
}

class NewCustomWidget extends StatefulWidget {
  const NewCustomWidget({
    Key? key,
    this.width,
    this.height,
    this.value,
  }) : super(key: key);

  final double? width;
  final double? height;
  final double? value;

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

// dynamic setState;

class _NewCustomWidgetState extends State<NewCustomWidget> {
  double _value = 40.0;
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Syncfusion Flutter Slider'),
        ),
        body: Center(
          child: SfSlider(
            min: 0.0,
            max: 100.0,
            value: _value,
            interval: 20,
            showTicks: true,
            showLabels: true,
            enableTooltip: true,
            minorTicksPerInterval: 1,
            onChanged: (dynamic value) {
              setState(() {
                _value = value;
              });
            },
          ),
        ),
      ),
    );
  }
}

Output : –

You have used two build methods inside the State and used the SfSlider widget without having the required parameters. We have shared the modified code snippet below for your reference, you can replace this in the flutter flow application.

Code snippet:

import 'package:syncfusion_flutter_sliders/sliders.dart';

class NewCustomWidget extends StatefulWidget {
  const NewCustomWidget({
    Key? key,
    this.width,
    this.height,
    this.value,
  }) : super(key: key);

  final double? width;
  final double? height;
  final double? value;

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

class NewCustomWidgetState extends State<NewCustomWidget> {
  double _value = 40.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Syncfusion Flutter Slider'),
      ),
      body: SfSlider(
        min: 0.0,
        max: 100.0,
        value: _value,
        onChanged: (dynamic value) {
          setState(() {
            _value = value;
          });
        },
      ),
    );
  }
}

Please signup or login to give your own answer.

Click here to cancel reply.