Can I use onTap from ListTile to go to new screen?

user_10925424 0
Viewed 26901

I'm new to flutter and dart language and this is my first real project which basically have lots of screen, I was wondering if it possible to use onTap from ListTile to go to new screen? if not I hope someone direct me. Thanks

here's my code so far:

import 'package:flutter/material.dart';
import 'package:rate_your_professor/screens/firstScreen.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Rate ',
    home: Scaffold(
      appBar: AppBar(
        title: Text("XXXXXXXXXX", textDirection: TextDirection.rtl),
      ),
      body: RaisedBookButton(),
    ),
  ));
}
Widget getListView(){
  var listView = ListView(
    children: <Widget>[


      Text("XXXXXXXXXXXXXXX", textDirection: TextDirection.rtl,textAlign: TextAlign.center,),
      ListTile(
        leading: Icon(Icons.location_city),
        title: Text("XXXXX ", textDirection: TextDirection.rtl),
        subtitle: Text("XXXXXXXXXX", textDirection: TextDirection.rtl,),

        onTap: (){
        //Here where I would like to go to new screen

        },
      ),
    ],
  );
  return listView;
}
dart flutter
3 Answers

In order to use Navigator to go to different pages, you need the BuildContext of your app. Here is an example of how you can get it:

import 'package:flutter/material.dart';
import 'package:rate_your_professor/screens/firstScreen.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Some App',
      home: SomeApp(),
    );
  }
}

class SomeApp extends StatelessWidget {
  Widget getListView(BuildContext context) {
    var listView = ListView(
      children: <Widget>[
        Text(
          "XXXXXXXXXXXXXXX",
          textDirection: TextDirection.rtl,
          textAlign: TextAlign.center,
        ),
        ListTile(
          leading: Icon(Icons.location_city),
          title: Text("XXXXX ", textDirection: TextDirection.rtl),
          subtitle: Text(
            "XXXXXXXXXX",
            textDirection: TextDirection.rtl,
          ),
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                  builder: (context) => YourNewPage(),
                  ),
            );
          },
        ),
      ],
    );
    return listView;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: getListView(context));
  }
}
user_54589130

You can navigate to the next screen using a Navigator

Here you need to use the Navigator.push if you want to go to the new screen and back.

Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => SecondScreen()),
  );

Meanwhile, check the official documentation for more information on the navigation.

user_76527580 
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: egtList.length,
      itemBuilder: (context, index) {
        return Card(
          child: ListTile(
            leading: Icon(
              Icons.movie_creation_rounded  ,
              color:Color(0xFF575757),
              size: 50.0,
            ),
            title: Text(egtList[index].title.toString()),
            subtitle: Text(egtList[index].examKey.toString()), //egtList[index].examKey.toString()
            trailing: egtList[index].isDone == true
                ? Icon(Icons.circle, color: Colors.green) :  Icon(Icons.circle, color: Colors.grey),
            onTap: () {globals.ShowSnackMessage2Red(egtList[index].examKey.toString(), context) ;
            },

          ),
        );
      },
    );
  }
user_136925030
Related