How can I create a list of buttons in ListView builder that coincide with the labels next to them in-CodePudding

I need to make this app that displays a list of historical figures using ListView in flutter. So far I have been able to make the list of names of historical figures. My next task is to make a button for each historical figure that goes next to the name, which would bring you to another screen with information about that specific historical figure. This is what I have so far and I'm having trouble implementing a button next to the historical figures name. I've tried making a class with IconButton but don't know how to route it/keep getting an error and also with IconButton how would I make a list of buttons that concide with name next to them. Open to any ideas. Thanks.


import "package:flutter/material.dart";
import "historicalfigureinfo.dart";

void main() {
  runApp(const MaterialApp(home: Hwk3()));
}
class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/':(context) => const Hwk3(),
        '/SantosDumont':(context)=>SantosDumont(),
        '/PabloPicasso':(context)=>PabloPicasso(),
      },
    );
  }
}

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

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

class _Hwk3State extends State<Hwk3> {
  var nameArray = [
    'Abraham Lincoln',
    'Benito Juarez',
    'Claude Monet',
    'Charles Darwin',
    'Deng Xiaoping',
    'Frederick Chopin',
    'George Washington Carver',
    'Georgia O\'Keeffe',
    'Mahatma Gandhi',
    'Mark Twain',
    'Muhammad Jinnah',
    'Pablo Picasso',
    'Santos Dumont'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Historical Figures'),
      ),
      body: ListView.builder(
        itemCount: nameArray.length,
        itemBuilder: (BuildContext context, index) {
          return ListTile(
              title: Text(nameArray[index]),
              trailing: InfoButtons(historicalfigure: '/SantosDumont'));
        },
      ),
    );
  }
}

class InfoButtons extends StatelessWidget {
  final String historicalfigure;

  InfoButtons({required this.historicalfigure});
  //Hector Merejo
  @override
  Widget build(BuildContext context) {
    return (IconButton(
        icon: const Icon(Icons.info),
        tooltip: "Press for more information on historical figure",
        onPressed: () {
          Navigator.of(context).pushNamed(historicalfigure);
        }));
  }
}

This is the error I get with the code above. Also I get this error if I click on any of the buttons next to the names. I would think I should get this error only when I click on Santos Dumont and nothing should happen if I click on the other names.

Could not find a generator for route RouteSettings("/SantosDumont", null) in the _WidgetsAppState.

Sorry if my explanation is confusing. Thanks again for any help.

CodePudding user response：

It seems the problem is your main function. When you use named routing, do not use home property in MaterialApp. Also, in your function you are calling for Hwk3 class, not the MyApp class, that's why the routes are never called in MaterialApp.

This class is never used

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: '/',
      routes: {
        '/':(context) => const Hwk3(),
        '/SantosDumont':(context)=>SantosDumont(),
        '/PabloPicasso':(context)=>PabloPicasso(),
      },
    );
  }
}

In your main function, you're not calling for actual MaterialApp. You are calling for Hwk3 class.

runApp(const MaterialApp(home: Hwk3()));

So, you can copy the following code.


import "package:flutter/material.dart";
import "historicalfigureinfo.dart";

void main() {
  runApp(

      MaterialApp(
        initialRoute: '/',
        routes: {
          '/':(context) => const Hwk3(),
          '/SantosDumont':(context)=>SantosDumont(),
          '/PabloPicasso':(context)=>PabloPicasso(),
        },
      )
  );
}
class Hwk3 extends StatefulWidget {
  const Hwk3({Key? key}) : super(key: key);

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

class _Hwk3State extends State<Hwk3> {
  var nameArray = [
    'Abraham Lincoln',
    'Benito Juarez',
    'Claude Monet',
    'Charles Darwin',
    'Deng Xiaoping',
    'Frederick Chopin',
    'George Washington Carver',
    'Georgia O\'Keeffe',
    'Mahatma Gandhi',
    'Mark Twain',
    'Muhammad Jinnah',
    'Pablo Picasso',
    'Santos Dumont'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Historical Figures'),
      ),
      body: ListView.builder(
        itemCount: nameArray.length,
        itemBuilder: (BuildContext context, index) {
          return ListTile(
              title: Text(nameArray[index]),
              trailing: InfoButtons(historicalfigure: '/SantosDumont'));
        },
      ),
    );
  }
}

class InfoButtons extends StatelessWidget {
  final String historicalfigure;

  InfoButtons({required this.historicalfigure});
  //Hector Merejo
  @override
  Widget build(BuildContext context) {
    return (IconButton(
        icon: const Icon(Icons.info),
        tooltip: "Press for more information on historical figure",
        onPressed: () {
          Navigator.of(context).pushNamed(historicalfigure);
        }));
  }
}

CodePudding user response：

You cannot use home parameter if your using named routing. That is causing the problem. See the relevant doc. Flutter doc

CodePudding user response：

This worked for me..... this post helped Page routing using List index in Flutter

class _Hwk3State extends State<Hwk3> {
  var nameArray = [
    'Abraham Lincoln',
    'Benito Juarez',
    'Claude Monet',
    'Charles Darwin',
    'Deng Xiaoping',
    'Frederick Chopin',
    'George Washington Carver',
    'Georgia O\'Keeffe',
    'Mahatma Gandhi',
    'Mark Twain',
    'Muhammad Jinnah',
    'Pablo Picasso',
    'Santos Dumont'
  ];
  List<Route> historicalfigures= [
    MaterialPageRoute(builder: (_) => AbrahamLincoln()),
    MaterialPageRoute(builder: (_) => BenitoJuarez()),
    MaterialPageRoute(builder: (_) => ClaudeMonet()),
    MaterialPageRoute(builder: (_) => CharlesDarwin()),
    MaterialPageRoute(builder: (_) => DengXiaoping()),
  ];

  @override
  Widget build(BuildContext context) {
    List<Route> myRoute = [];
    return Scaffold(
      appBar: AppBar(
        title: const Text('Historical Figures'),
      ),
      body: ListView.builder(
        itemCount: nameArray.length,
        itemBuilder: (BuildContext context, index) {
          return ListTile(
              title: Text(nameArray[index]),
            trailing: Icon(Icons.info_outlined),
            onTap: () {
              Navigator.of(context).push(historicalfigures[index]);
            },
          );
        },
      ),
    );
  }
}