I want to pass a value from one page to another after clicking it if not it should show a message in flutter

Question

I have 5 texts in a row, all text is wrapped inside Inkwell, I want the selected text to send to the next page in the flutter, if not selected it should show the select value in a snack bar

Padding(
      padding: const EdgeInsets.only(left: 5, right: 5),
      child: Container(
            decoration: BoxDecoration(
            color: variantList[i] == variantList[i]['varient_color1']
                        ? Colors.grey[100]
                        : Colors.white,
            border: Border.all(
            color: Colors.blueGrey,
               style: BorderStyle.solid,
                   width: 1.0,
             ),
             borderRadius: BorderRadius.circular(3.0),
           ),
           child: InkWell(
             child: Text(" ${variantList[i]['varient_color1']} "),
             onTap: () {},
           )
     ),
),

Answer 1

you can do like this.

NavigationDemo.dart

class NavigationDemo extends StatefulWidget {
  const NavigationDemo({Key? key}) : super(key: key);

  @override
  _NavigationDemoState createState() => _NavigationDemoState();
}

class _NavigationDemoState extends State<NavigationDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children:  [
            InkWell(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context)=>DemoText("Text1")));

                },
                child: Text('Text1',style: TextStyle(fontSize: 20))),
            SizedBox(width: 10,),
            InkWell(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context)=> DemoText("Text2")));

                },
                child: Text('Text2',style: TextStyle(fontSize: 20))),
            SizedBox(width: 10,),
            InkWell(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context)=>  DemoText("Text3")));

                },
                child: Text('Text3',style: TextStyle(fontSize: 20))),
            SizedBox(width: 10,),
            InkWell(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context)=>  DemoText("Text4")));;
                },
                child: Text('Text4',style: TextStyle(fontSize: 20))),
            SizedBox(width: 10,),
            InkWell(
                onTap: (){
                  Navigator.push(context, MaterialPageRoute(builder: (context)=>  DemoText("Text5")));;
                },
                child: Text('Text5',style: TextStyle(fontSize: 20))),
          ],
        ),
      ),
    );
  }
}

DemoText.dart

class DemoText extends StatefulWidget {
  String text;
   DemoText(this.text);

  @override
  _DemoTextState createState() {
    return _DemoTextState();
  }
}

class _DemoTextState extends State<DemoText> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text(widget.text,style: TextStyle(fontSize: 20),),
      ),
    );
  }
}

This is just example you can refer this.

Answer 2

Use Navigator.push to implement this feature, you can pass arguments with your screen name.

  child: InkWell(
       child: Text(" ${variantList[i]['varient_color1']} "),
      onTap: () {
             Navigator.push(context, MaterialPageRoute(builder: (context)=>  DemoText("${variantList[i]['varient_color1']}")));
      },
   )