Navigating to different screens from listTile (flutter, dart)

Question

I am new to Flutter & would greatly appreciate some help! Apologies in advance for the messy code- I'm trying my best to understand flutter!

I am creating a simple quiz app.

The first page begins with a listTile with the titles of each subsequent page.

From clicking each listTile, I hope to navigate to a different screen. The screens are all in separate dart files.

Ideally, I would like to have the ontap function within the following code, so that each individually titled listTile could lead to a different screen:

Lesson(title: "Hosea", scoreString: "1 / 10", score: 0.1),

However, my ontap function can only be built within listTile, and so i can't make it individual for each Card!

Please help!!

**

class WelcomeScreen extends StatelessWidget {
  static const String id = 'welcome_screen';
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Minor Prophets',
      theme: new ThemeData(
          primaryColor: Color.fromRGBO(58, 66, 86, 1.0), fontFamily: 'Raleway'),
      home: new ListPage(title: 'Lessons'),
      // home: DetailPage(),
    );
  }
}

class ListPage extends StatefulWidget {
  ListPage({Key key, this.title}) : super(key: key);

  final String title;

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

class _ListPageState extends State<ListPage> {
  List lessons;

  @override
  void initState() {
    lessons = getLessons();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    ListTile makeListTile(Lesson lesson) => ListTile(
          contentPadding: EdgeInsets.symmetric(horizontal: 20.0, vertical: 1.0),
          leading: Container(
            padding: EdgeInsets.only(right: 12.0),
            decoration: new BoxDecoration(
                border: new Border(
                    right: new BorderSide(width: 1.0, color: Colors.white24))),
            child: Icon(Icons.face, color: Colors.white),
          ),
          title: Text(
            lesson.title,
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          //

          subtitle: Row(
            children: <Widget>[
              Expanded(
                  flex: 1,
                  child: Container(
                    // tag: 'hero',
                    child: LinearProgressIndicator(
                        backgroundColor: Color.fromRGBO(209, 224, 224, 0.2),
                        value: lesson.indicatorValue,
                        valueColor: AlwaysStoppedAnimation(Colors.green)),
                  )),
              Expanded(
                flex: 4,
                child: Padding(
                    padding: EdgeInsets.only(left: 10.0),
                    child: Text(lesson.level,
                        style: TextStyle(color: Colors.white))),
              )
            ],
          ),
          trailing:
              Icon(Icons.keyboard_arrow_right, color: Colors.white, size: 30.0),
          onTap: () {

          },
        );

    Card makeCard(Lesson lesson) => Card(
          elevation: 8.0,
          margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
          child: Container(
            decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
            child: makeListTile(lesson),
          ),
        );

    final makeBody = Container(
      // decoration: BoxDecoration(color: Color.fromRGBO(58, 66, 86, 1.0)),
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        shrinkWrap: true,
        itemCount: lessons.length,
        itemBuilder: (BuildContext context, int index) {
          return makeCard(lessons[index]);
        },
      ),
    );


**

`enter code here`List getLessons() {
  return [
    Lesson(title: "Hosea", scoreString: "1 / 10", score: 0.1),
    Lesson(title: "Joel", scoreString: "1 / 10", score: 0.1),
    Lesson(title: "Amos", scoreString: "1 / 10", score: 0.1),
    Lesson(title: "Obadiah", scoreString: "1 / 10"),
    Lesson(title: "Jonah", scoreString: "1 / 10"),
    Lesson(title: "Micah", scoreString: "1 / 10"),
    Lesson(title: "Nahum", scoreString: "1 / 10"),
    Lesson(title: "Habakkuk", scoreString: "1 / 10"),
    Lesson(title: "Zephaniah", scoreString: "1 / 10"),
    Lesson(title: "Haggai", scoreString: "1 / 10"),
    Lesson(title: "Zechariah", scoreString: "1 / 10"),
    Lesson(title: "Malachi", scoreString: "1 / 10"),
  ];
}

**

class Lesson {
  String title;
  String scoreString;
  double score;

  Lesson({this.title, this.scoreString, this.score});
}

Answer 1

try to pass in makeListTile(lesson,index) and based on this index you can navigate to different screen

onTap(){
if(index==0)
// do something
else if(index==1)
// do something different
}