Search code examples
flutterdartbutton

How to add text inside cupertino switch flutter


I want to add text inside cupertino switch like attached image.. Is there a way to do it?

enter image description here


Solution

  • I create custom widget but without cupertinoswitch animation in it. I hope this match your needs =))

    GestureDetector(
                                    onTap: () {
                                      setState(() {
                                        val = !val;
                                      });
                                    },
                                    child: Container(
                                      width: size.width * 0.35,
                                      decoration: BoxDecoration(
                                          borderRadius: BorderRadius.circular(30),
                                          color: kSecondaryColor),
                                      child: Padding(
                                        padding: const EdgeInsets.all(8.0),
                                        child: Row(
                                          mainAxisAlignment:
                                              MainAxisAlignment.spaceBetween,
                                          children: [
                                            Container(
                                              width: 60,
                                              height: 30,
                                              decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(30),
                                                  color: val
                                                      ? Colors.white
                                                      : kSecondaryColor),
                                              child: Center(
                                                  child: Text(
                                                'BUY',
                                                style: TextStyle(
                                                    fontWeight: FontWeight.bold,
                                                    color: val
                                                        ? Colors.black
                                                        : Colors.white),
                                              )),
                                            ),
                                            Container(
                                              width: 60,
                                              height: 30,
                                              decoration: BoxDecoration(
                                                  borderRadius:
                                                      BorderRadius.circular(30),
                                                  color: val
                                                      ? kSecondaryColor
                                                      : Colors.white),
                                              child: Center(
                                                  child: Text(
                                                'SELL',
                                                style: TextStyle(
                                                    fontWeight: FontWeight.bold,
                                                    color: val
                                                        ? Colors.white
                                                        : Colors.black),
                                              )),
                                            ),
                                          ],
                                        ),
                                      ),
                                    ),
                                  ),
    

    image