Home > OS >  how can i make the button selected?
how can i make the button selected?

Time:11-08

what I want:

enter image description here

My Widget:

class Buttons extends StatelessWidget {
      const Buttons({
      Key key,
      @required this.selectBloc,
      @required this.selectStatus,
    }) : super(key: key);

    final SelectBloc selectBloc;
    final int selectStatus;

    @override
    Widget build(BuildContext context) {
      return BlocBuilder<SelectBloc, SelectState>(
          bloc: selectBloc,
          builder: (context, state) {
            return OutlinedButton(
              onPressed: () {
            },
            child: Text( dynamic, style: TextStyle(color: Colors.grey[500])),
            style: ButtonStyle(
              side: MaterialStateProperty.all(BorderSide(
                  color: state.statusSelected == selectStatus
                      ? Colors.blue
                      : Colors.grey)),
            ),
          );
        });
  }
}

i use it:

    Buttons(
      selectBloc: selectBloc,
      selectStatus: 0,
    ),
    Buttons(
      selectBloc: selectBloc,
      selectStatus: 1,
    ),

CodePudding user response:

You should have another field final Function() onTap in Buttons. then implement it where you defined your Buttons.

I mean sth like this:

class Buttons extends StatelessWidget {
      const Buttons({
      Key key,
      @required this.selectBloc,
      @required this.isSelecteed,
      @required this.onTap,
    }) : super(key: key);

    final SelectBloc selectBloc;
    final bool isSelecteed;
    final Function() onTap;

    @override
    Widget build(BuildContext context) {
      return BlocBuilder<SelectBloc, SelectState>(
          bloc: selectBloc,
          builder: (context, state) {
            return OutlinedButton(
              onPressed: onTap,
            child: Text( dynamic, style: TextStyle(color: Colors.grey[500])),
            style: ButtonStyle(
              side: MaterialStateProperty.all(BorderSide(
                  color: isSelecteed
                      ? Colors.blue
                      : Colors.grey)),
            ),
          );
        });
  }
}

then:

Buttons(
      selectBloc: selectBloc,
      isSelecteed: 1 == selectedIndex,
      onTap:(){
         selectedIndex = 1;
         setState((){});
      }
    ),

I hope you get the point :)

  • Related