I'm a newbie in Flutter and I'm trying to design a page to let the user choose the user type. And I'm trying to use onTap method so that when I click on the picture I go to the selected user type page but when I used the onTap method the user type image disappears. I don't know if I'm using the right method or if I'm using it in a wrong way. But here is what my code looks like you maybe able to help me :) thank you

import 'package:flutter/material.dart';

class ChooseUser extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        body: new Container(
          padding: const EdgeInsets.fromLTRB(0, 250, 0, 0),
          child: new Column(
            children: [
              new Container(
                alignment: Alignment(0.4, 0.2),
                child: new Text(
                  "فضلًا أختر نوع المستخدم",
                  style: TextStyle(
                      fontSize: 30,
                      fontFamily: 'Cairo',
                      color: Color(0xFF403E3E),
                      shadows: [
                        Shadow(
                            color: Color(0xFF403E3E),
                            offset: Offset(1, 1),
                            blurRadius: 1)
                      ]),
                ),
              ),
              new Container(
                  height: 300.0,
                  width: 300.0,
                  padding: const EdgeInsets.fromLTRB(15, 120, 0, 0),
                  child: new Row(children: [
                    new Column(
                      children: [
                        new Container(
                          margin: const EdgeInsets.only(right: 40.0),
                          height: 100.0,
                          width: 100.0,
                          decoration: new BoxDecoration(
                            image: DecorationImage(
                                image: new AssetImage(
                                    'assets/images/elderly-icon.png'),
                                fit: BoxFit.fill),
                          ),
                        ),
                        new Container(
                            margin: const EdgeInsets.only(right: 40.0, top: 10),
                            child: new Text(
                              "كبير سن",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontFamily: 'Cairo',
                                  color: Color(0xFF403E3E),
                                  shadows: [
                                    Shadow(
                                        color: Color(0xFF403E3E),
                                        offset: Offset(1, 1),
                                        blurRadius: 1)
                                  ]),
                            )),
                      ],
                    ),
                    new Column(children: [
                      GestureDetector(
                        onTap: () {
                          Navigator.of(context).pushNamed('medical-choose');
                          new Container(
                            margin: const EdgeInsets.only(left: 20.0),
                            height: 100.0,
                            width: 100.0,
                            decoration: new BoxDecoration(
                              image: DecorationImage(
                                  image: new AssetImage(
                                      'assets/images/staff-icon.png'),
                                  fit: BoxFit.fill),
                            ),
                          );
                          new Container(
                            margin: const EdgeInsets.only(left: 10.0, top: 10),
                            child: new Text(
                              "طاقم طبي",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontFamily: 'Cairo',
                                  color: Color(0xFF403E3E),
                                  shadows: [
                                    Shadow(
                                        color: Color(0xFF403E3E),
                                        offset: Offset(1, 1),
                                        blurRadius: 1)
                                  ]),
                            ),
                          );
                        },
                      ),
                    ]),
                  ])),
            ],
          ),
        ),
      ),
    );
  }
}

CodePudding user response：

On the onTap() method, usually nothing is rendered in the function.

The GestureDetector should have the image as a child and the onTap() would just have the Navigator.pushNamed

Something like this:

    GestureDetector(
      child: Container(
          decoration: BoxDecoration(
              image: DecorationImage(
                  image: AssetImage(
                          'assets/images/staff-icon.png'
                      ),
                      fit: BoxFit.fill
                  )
              )
          )
      ),
      onTap: (){
        Navigator.of(context).pushNamed('medical-choose');
      },
    );