Реализация слайдера на нижней панели в флаттере - PullRequest
Новая
       8

Реализация слайдера на нижней панели в флаттере

0 голосов
/ 19 октября 2018

Как внедрить ползунок внутри нижнего листа в флаттер.Я попробовал это, но слайдер не двигался вперед.Но это сработало, если я поместил слайдер в новую леску.Помоги мне.Заранее спасибо.

здесь это мой код. 

                          new InkWell(
                                onTap: () {
                                  //  fire_ac_on_1();
                                },
                               onDoubleTap:(){
                                  _showModalSheet_ac();

                                }

                                onLongPress: () {
                                  selectTime(context);
                                },
                                child: new IconButton(
                                  icon: new Image.asset('images/ac.png',
                                      color: ac_on_state == true ? Colors
                                          .green : Colors.redAccent),
                                  onPressed: () {
                                    fire_ac_on();
                                  },
                                  iconSize: 80.0,
                                ),
                              ),

// ModalBottom Sheet void _showModalSheet_ac () {

double height = MediaQuery.of(context).size.height;
//print(height);
showModalBottomSheet(context: context, builder: (builder){
  return new Container(
    height: height - 200.0,
      child: new Center(
        child:  new Column(
          children: <Widget>[
            new Container(
             child: new Slider(
              value: slider_value,
           onChanged: onchanged),

          )
            )
          ],
        ),
      )
  );
});

}

onchanged (двойное значение) {

 setState(() {
  slider_value = value;

});
print(slider_value);

}

Ответы [ 2 ]

0 голосов
/ 04 июня 2019

Я решил ту же проблему, используя StreamBuilder и RxDart: 

import 'package:rxdart/rxdart.dart';

final _slider = PublishSubject<double>();
Observable<double> get sliderStream => _slider.stream;

void _settingModalBottomSheet(context){
    showModalBottomSheet(
        context: context,
        builder: (BuildContext bc){
          return StreamBuilder(
            builder: (BuildContext context, AsyncSnapshot<double> snapshot) {
              return Slider(
                  activeColor: Colors.indigoAccent,
                  min: 0.0,
                  max: 15.0,
                  onChanged: (newRating) {
                    _slider.sink.add(newRating);
                  },
                  value: snapshot.data,
                );
            },
            initialData: 0.0,
            stream: sliderStream,
          );
        }
    );
  }

На каждом onChanged событии вы будете испускать нового слайдеразначение (_slider.sink.add(newRating);).StreamBuilder будет уведомляться каждый раз при изменении значения ползунка и перестраивать виджет с обновленным значением (value: snapshot.data).

0 голосов
/ 20 октября 2018

Вы должны передать BuildContext строителю вместо строителя.Я надеюсь, что следующий пример может помочь вам. 

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Bottom modal tutorial',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: new MyHomePage(title: 'Bottom modal tutorial'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  mainBottomSheet(BuildContext context){
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context){
          return Container(
            height: 300.0,
              child: Center(child: new Text("Demo Text"))
          );
        }
    );
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: Container(
        child: new Center(
          child: new Text(
            'Body',
          ),
        ),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: () => mainBottomSheet(context),
        child: new Icon(Icons.add),
      ),
    );
  }
}
...