Flutter 自定义单选按钮

Question

Can anyone guide me how to achieve this in flutter? Thanks

Answer 1

Here you go bro..... Cheers !!!

class _MyHomePageState extends State<MyHomePage> {



  double width;
  double height;

  int currentValue = 5;

  Map<int,int> minutesCostMap = {
    5: 20,
    10 : 25,
    15 : 30,
    20 : 35,
  },


  @override
  Widget build(BuildContext context) {

    height = MediaQuery.of(context).size.height;
    width = MediaQuery.of(context).size.width;

    return Scaffold(
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(vertical: 15),
              child: Text("Chris Watson",style: TextStyle(fontWeight: FontWeight.bold,fontSize: 19),),
            ),
            Padding(
              padding: const EdgeInsets.only(bottom: 25),
              child: Text.rich(
                  TextSpan(children: [
                    TextSpan(text: "This "),
                    TextSpan(text: currentValue.toString() + " minutes ",style: TextStyle(fontWeight: FontWeight.bold)),
                    TextSpan(text: "session will cost you "),
                    TextSpan(text: minutesCostMap[currentValue].toString() + "\$",style: TextStyle(fontWeight: FontWeight.bold)),
                  ])
              ),
            ),
            Stack(
              alignment: Alignment.center,
              children: [
                Container(                                  /// GREY HORIZONTAL LINE
                  height: 10,width: width * 0.6,color: Colors.grey[350],
                ),
                Container(
                  width: width * 0.6 + 50,
                  height: 50,
                  child: Row(                            /// ROW OF 4 CIRCLE WIDGETS PLACED ABOVE THAT LNE
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      checkpointButton(5,currentValue == 5),
                      checkpointButton(10,currentValue == 10),
                      checkpointButton(15,currentValue == 15),
                      checkpointButton(20,currentValue == 20),
                    ],
                  ),
                ),
                //Positioned(left: 0,chil),
                //Positioned(left: ,child: Container(decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.blue),width: 40,height: 40,)),
                //Positioned(left: ,child: Container(decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.blue),width: 40,height: 40,)),
                //Positioned(left: ,child: Container(decoration: BoxDecoration(shape: BoxShape.circle,color: Colors.blue),width: 40,height: 40,)),
              ],
            ),
            Padding(
              padding: EdgeInsets.only(top: 25),
              child: Container(
                width: width * 0.75,
                height: 40,
                child: Row(
                  mainAxisSize: MainAxisSize.max,
                  children: [
                    Expanded(
                      flex: 1,
                      child: Container(
                        decoration: BoxDecoration(border: Border.all(color: Colors.blue,width: 1.5)),
                        child: Center(child: Text("CANCEL",style: TextStyle(color: Colors.blue),),),
                      ),
                    ),
                    Container(width: 10,height: 5,),
                    Expanded(
                      flex: 2,
                      child: Container(color: Colors.blue,child: Center(child: Text("ACCEPT",style: TextStyle(color: Colors.white),),),),
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

  Widget checkpointButton(int value,bool isActive){
    return GestureDetector(               /// THIS WILL DETECT A TAP EVENT ON THIS CIRCLE WIDGET
        onTap: (){
          setState(() {
            currentValue = value;         /// IF THE CURRENT VALUE IS SAME AS THE VALUE OF THE CIRCLE, IT WILL CHANGE ITS APPEARANCE TO SHOW THAT ITS ACTIVE
          });
        },
        child: Container(            /// CIRCLE PRESENT BEHIND PROVIDING THE BLUE BORDER
            height: 50,width: 50,
            decoration: BoxDecoration(shape: BoxShape.circle,border: Border.all(color: isActive ? Colors.blue : Colors.transparent,width: 1.5)),
            child: Center(
                child: Container(        /// INNER CIRCLE CONTAINING THE VALUE
                  decoration: BoxDecoration(shape: BoxShape.circle,color: isActive ? Colors.blue : Colors.grey[350]),
                  width: 40,height: 40,
                  child: Center(child: Text(value.toString(),style: TextStyle(fontWeight: FontWeight.bold,color: isActive ? Colors.white : Colors.black),)),
                  )
            )
        )
    );
  }

}

Result:

Edit:

I have updated the code above to match your requirements. Basically what I did what I added a Map (minutesCostMap) which contains the list of the minutes and their corresponding cost. Then moving on the the place where we are displaying the cost, you can see that I used the value from the map itself. So the value we are printing will output the cost with corresponds to the provided minutes(ie present in the currentValue variable)