How to make a range number picker

Widgets & Design

I'm creating a dating app.

I should make a function to select the range of tall for filtering.

For example , from 150cm to 190cm.

But it doesn't work well...

What have you tried so far?

I made appstate "mintall" and "maxtall", and two custom widgets "mintallPicker" and "maxtallpicker".

// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!

import 'package:numberpicker/numberpicker.dart';

class MaxTallPicker extends StatefulWidget {
  final int initialValue;
  final int minValue;
  final int maxValue;
  final double width;
  final double height;
  final String stateVariable;

  const MaxTallPicker({
    Key? key,
    required this.initialValue,
    required this.minValue,
    required this.maxValue,
    required this.height,
    required this.width,
    required this.stateVariable,
  }) : super(key: key);

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

class _MaxTallPickerState extends State<MaxTallPicker> {
  int _currentValue = 0;

  @override
  void initState() {
    super.initState();
    _currentValue = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: NumberPicker(
        value: _currentValue,
        minValue: widget.minValue,
        maxValue: widget.maxValue,
        onChanged: (value) {
          setState(() {
            _currentValue = value;
            FFAppState().update(() {
              FFAppState().maxtall = value;
            });
          });
        },
      ),
    );
  }
}


// Automatic FlutterFlow imports
import '/backend/supabase/supabase.dart';
import '/flutter_flow/flutter_flow_theme.dart';
import '/flutter_flow/flutter_flow_util.dart';
import '/custom_code/widgets/index.dart'; // Imports other custom widgets
import '/custom_code/actions/index.dart'; // Imports custom actions
import '/flutter_flow/custom_functions.dart'; // Imports custom functions
import 'package:flutter/material.dart';
// Begin custom widget code
// DO NOT REMOVE OR MODIFY THE CODE ABOVE!

// Set your widget name, define your parameter, and then add the
// boilerplate code using the green button on the right!

import 'package:numberpicker/numberpicker.dart';

class MinTallPicker extends StatefulWidget {
  final int initialValue;
  final int minValue;
  final int maxValue;
  final double width;
  final double height;
  final String stateVariable;

  const MinTallPicker({
    Key? key,
    required this.initialValue,
    required this.minValue,
    required this.maxValue,
    required this.height,
    required this.width,
  }) : super(key: key);

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

class _MinTallPickerState extends State<MinTallPicker> {
  int _currentValue = 0;

  @override
  void initState() {
    super.initState();
    _currentValue = widget.initialValue;
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      child: NumberPicker(
        value: _currentValue,
        minValue: widget.minValue,
        maxValue: widget.maxValue,
        onChanged: (value) {
          setState(() {
            _currentValue = value;
            FFAppState().update(() {
              FFAppState().mintall = value;
            });
          });
        },
      ),
    );
  }
}
Did you check FlutterFlow's Documentation for this topic?
Yes
1
1 reply