How to add a ontap funtion? (I want to navigate to another page)-CodePudding

i want to make the circular progress indicator to navigate to a new page ontap function while maintaining the stucture.

 Row(
      children: const [
        Expanded(
          child: AnimatedCircularProgressIndicator(
            percentage: 0.8,
            label: "Flutter",
          ),
        ),
        SizedBox(width: defaultPadding),
        Expanded(
          child: AnimatedCircularProgressIndicator(
            percentage: 0.72,
            label: "REG-NEW",
          ),
        ),
        SizedBox(width: defaultPadding),
        Expanded(
          child: AnimatedCircularProgressIndicator(
            percentage: 0.65,
            label: "Firebase",
          ),
        ),
      ],
    ),

CodePudding user response：

wrap AnimatedCircularProgressIndicator with tappable widget and navigate on tap.

InkWell(
  onTap: () {
    //nav to new Page
    Navigator.of(context).push(MaterialPageRoute(
      builder: (context) {
        return NewPage();
      },
    ));
  },
  child: AnimatedCircularProgressIndicator(...),
),

When ever you need tap even over a widget, you can choose GestureDetector or InkWell..

CodePudding user response：

You can choose InkResponse, InkWell or GesturedDetector. the last 1 only fire function when others are more beauty