In Flutter, how do I pass data into a Stateless Widget?

Question

I'm trying to build my first Flutter app, and have run into difficulty with passing data into Stateless Widgets. I have the following classes:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Title',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new MainBody(),
    );
  }
}


class MainBody extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: const EdgeInsets.only(left: 20.0, right: 20.0),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TimeCheck(),
          ],
        ),
      ),
    );
  }
}

TimeCheck is a Stateful Widget. Basically, I want to be able to set some values at the start, and then pass them along to TimeCheck, via MainBody. Everything I read shows how to pass data into Stateful Widgets, but is it possible to pass it through a Stateless Widget?

I recognise I may be taking the wrong approach, so in case it helps, what I'd ultimately like to do is have a "settings" page where the user can set the values for the data (a string and some numbers), and then those values get passed to TimeCheck where they're used to generate the display.

I'd also like to be able to save the user-set values if possible, so they don't have to enter them each time, and then I'd like to be able to read them in when TimeCheck is instantiated.

Solution 1

Yes you can do this simply by passing the info to the constructor. Something like this:

 class MyApp extends StatelessWidget {
  MyApp(this.yourData);

  final int yourData;
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'App Title',
      theme: new ThemeData(
        primarySwatch: Colors.green,
      ),
      home: new MainBody(yourData),
    );
  }
}


class MainBody extends StatelessWidget {
  MainBody(this.yourData);

  final int yourData;

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Padding(
        padding: const EdgeInsets.only(left: 20.0, right: 20.0),
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            new TimeCheck(yourData),
          ],
        ),
      ),
    );
  }
}

Solution 2

For this, we create a StatelessWidget. We call it TodosScreen. Since the contents of this page won’t change during runtime, we’ll have to require the list of todos within the scope of this widget.

We pass in our ListView.builder as the body of the widget we’re returning to build(). This renders the list onto the screen for you to get going!

class TodosScreen extends StatelessWidget {
  final List<Todo> todos;

  //requiring the list of todos
  TodosScreen({Key key, @required this.todos}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      //passing in the ListView.builder
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[index].title)
          );
        },
      ),
    );
  }
}

Create a detailed screen to display information about a todo

Now, create the second screen. The title of the screen contains the title of the todo, and the body of the screen shows the description.

Since the detail screen is a normal StatelessWidget, require the user to enter a Todo in the UI. Then, build the UI using the given todo.

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo.
  final Todo todo;

  // In the constructor, require a Todo.
  DetailScreen({Key key, @required this.todo}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

Navigate and pass data to the detail screen

With a DetailScreen in place, you’re ready to perform the Navigation. In this example, navigate to the DetailScreen when a user taps a todo in the list. Pass the todo to the DetailScreen.

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todos[index].title),
      // When a user taps the ListTile, navigate to the DetailScreen.
      // Notice that you're not only creating a DetailScreen, you're
      // also passing the current todo to it.
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(todo: todos[index]),
          ),
        );
      },
    );
  },
);

For more info, see https://flutter.dev/docs/cookbook/navigation/passing-data

Solution 3

class MainMenuCard extends StatelessWidget {
final Choice choice;
final int index;

const MainMenuCard({Key key, this.choice, this.index, Choice Choice, int int})
  : super(key: key);
 

And Call like this

MainMenuCard(choice : choices[index],int: index)

there 'Choice' is Model class (when we using with List.generate) otherwise you can easily pass Data.

 final Choice choice;
 const List<Choice> choices = const <Choice>[]

Comments

[Taha Ali]

How can I pass that 'yourData' variable to the padding value in place of 20.0? Dart says it is not a constant.