web-dev-qa-db-fra.com

En flutter, comment passez-moi des données dans un widget apatride?

J'essaie de construire ma première application Flutter, et j'ai rencontré des difficultés avec des données qui transmettent des widgets apatrides. J'ai les classes suivantes:

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 est un Stateful Widget. Fondamentalement, je veux pouvoir définir des valeurs au début, puis les transmettre à TimeCheck, via MainBody. Tout ce que j'ai lu montre comment transmettre des données en Stateful Widgets, mais est-il possible de passer à travers un Stateless Widget?

Je reconnais que je peux prendre la mauvaise approche, donc au cas où cela vous aidera, ce que j'aimerais finalement faire, c'est avoir une page "Paramètres" dans laquelle l'utilisateur peut définir les valeurs des données (une chaîne et des chiffres) et Ensuite, ces valeurs sont transmises à TimeCheck où ils sont utilisés pour générer l'affichage.

J'aimerais également pouvoir enregistrer les valeurs de l'utilisateur si possible, afin de ne pas avoir à les pénétrer à chaque fois, puis je voudrais pouvoir les lire quand TimeCheck est instancié.

flutterstatelesswidgetflutter-widget
14
Sharon

Pour cela, nous créons un StatelessWidget. Nous l'appelons Todosscreen. Étant donné que le contenu de cette page ne changera pas pendant l'exécution, nous devrons avoir besoin de la liste des TODO dans le cadre de ce widget.

Nous passons dans notre ListView.builder Comme le corps du widget que nous retournons à build(). Cela rend la liste sur l'écran pour que vous puissiez aller!

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)
          );
        },
      ),
    );
  }
}

Créez un écran détaillé pour afficher des informations sur un TODO

Maintenant, créez le deuxième écran. Le titre de l'écran contient le titre de TODO et le corps de l'écran affiche la description.

Étant donné que l'écran de détail est un StatelessWidget, obligeant l'utilisateur à entrer un toDO dans l'interface utilisateur. Ensuite, construisez l'interface utilisateur avec le TODO donné.

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),
      ),
    );
  }
}

Naviguer et transmettre des données sur l'écran de détail

Avec un DetailScreen en place, vous êtes prêt à effectuer la navigation. Dans cet exemple, naviguez jusqu'au DetailScreen lorsqu'un utilisateur tape un toDO dans la liste. Passez le TODO au bout des détails.

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]),
          ),
        );
      },
    );
  },
);

Pour plus d'informations, voir https://flutter.dev/docs/cookbook/navigation/passing-Data

0
Paresh Mangukiya