Home > database >  How can I set initial position for slidable_button
How can I set initial position for slidable_button

Time:02-10

I'd like to use slidable_button found here to set a bar happy hour on or off in my app. It doesn't have an initial position so I need to use two buttons, one to set happy hour on and another to turn it off. Ideally I'd like to have it initialize in either the left position or the right position depending on the current state. Unfortunately the package is very new and the author is not contactable.

Is there a way I could modify this code to set an initial button position left or right?

Here is the code I have so far. I have two buttons in separate rows in a column but have only shown the code for one as they are similar.

           Center(
 
             child: SlidableButton(
                      width: MediaQuery.of(context).size.width / 3,
                      buttonWidth: 60.0,
                      color: Colors.green,
                      buttonColor: Colors.blue,
                      dismissible: true,
                      label: Center(child: Text(_user.turnOnString!)),
                      child: Padding(
                      padding: const EdgeInsets.all(8.0),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(''),
                            Text('Start'),
                          ],
                        ),
                      ),
                      onChanged: (position) {
                        if (position == SlidableButtonPosition.right) {_startHappyHour(context, _user);} 
                      },
                    ),

           ),

CodePudding user response:

switch button would be more suitable for your situation, like lite_rolling_switch, you can set initial value(on/off):

LiteRollingSwitch(
    //initial value
    value: true,
    textOn: 'disponible',
    textOff: 'ocupado',
    colorOn: Colors.greenAccent[700],
    colorOff: Colors.redAccent[700],
    iconOn: Icons.done,
    iconOff: Icons.remove_circle_outline,
    textSize: 16.0,
    onChanged: (bool state) {
      //Use it to manage the different states
      print('Current State of SWITCH IS: $state');
    },
),

CodePudding user response:

Try like this if it work

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
            icon: Icon(Icons.restore),
            onPressed: () => swipeController.reset(),
          )
        ],
      ),
      body: Container(
        alignment: Alignment.center,
        child: Padding(
          padding: const EdgeInsets.all(24.0),
          child: SlidableButton(
            swipeController: swipeController,
            thumb: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Align(
                    widthFactor: 0.90,
                    child: Icon(
                      Icons.chevron_right,
                      size: 60.0,
                      color: Colors.white,
                    )),
              ],
            ),
            content: Center(
              child: Text(
                'Testing',
                style: TextStyle(color: Colors.white),
              ),
            ),
            onChanged: (result) {
              print(result);
              if (result == SlidableButton.SwipeRight) {
              } else {}
            },
          ),
        ),
      ),
    );
  }
  • Related