Pass Data to Stateless Widget in Flutter

Last Updated: September 17, 2022 flutter Share on :

In flutter, Stateless widgets are those widgets that don’t require any change in their state. They are immutable. In order to pass data to a stateless widget, we have to use a constructor. The constructor accepts the data as a parameter and we can use that data in our widget.

class FirstScreen extends StatelessWidget {
  const FirstScreen({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => const SecondScreen(
                  title: 'Second Screen',
                  description: 'Second Screen Description',
                ),
              ),
            );
          },
          child: const Text('Go to Second Screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({Key? key, required this.title, required this.description}) : super(key: key);

  final String title;
  final String description;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(description),
      ),
    );
  }
}

The code example creates two screens. The first screen has a button that, when pressed, navigates to the second screen. We are passing title and description data to the second screen. It will be shown on the Second screen when We click on the button "Go to Second Screen".

Pass List Data to Screen and render the list

In the previous code example, we passed the String type value in the Stateless Widget and then show shown on the screen. Now we will pass a List into the stateless widget and show the items of the list on the new Screen.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class Fruit {
  String? fruitName;
  int? quantity;
  
  Fruit({this.fruitName, this.quantity});
}

class HomeScreen extends StatelessWidget {
  HomeScreen({Key? key}) : super(key: key);
  
  final List<Fruit> _fruitList = [
    Fruit(fruitName: 'Apple', quantity: 30),
    Fruit(fruitName: 'Banana', quantity: 50),
    
  ];
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("First Screen"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(
                builder: (context) => FruitsScreen(
                  fruitList: _fruitList
                ),
              ),
            );
          },
          child: const Text('Show fruit list'),
        ),
      ),
    );
  }
}

class FruitsScreen extends StatelessWidget {
  const FruitsScreen({Key? key, required this.fruitList}) : super(key: key);

  final List<Fruit> fruitList;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Fruit List"),
      ),
      body: ListView.builder(
        itemCount: fruitList.length,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(
            leading: const Icon(Icons.list),
            title: Text(fruitList[index].fruitName ?? ''),
          );
        },
      ),
    );
  }
}

Contribute to this Snippet

Was this helpful?

Created by :

@

Write your Comment

0 Comments

Similar code snippets

Create your own code snippets and search them using our portal and chrome extension

Programming Feeds

Learn something new everyday on Devsheet

Important Links

Join Devsheet Create new snippet Ask a Question Write an article Online JSON Viewer