How to pass a string from one page to another on flutter?

Question

How can I pass image_category(a String value) from one page to another and replace it with a Text widget?

This is where I get the String from (scrlView):-

@override
Widget build(BuildContext context) {
return Padding(
  padding: const EdgeInsets.all(0.0),
  child: GestureDetector(
    onTap: () {
      print("$image_category"); //TODOPass tpped text to CatagoriesBar, 
    },

and this is where I want to replace it with the text widget(this is on a separate pageCategoriesBar):-

import 'package:flutter/material.dart';

 class CategoriesBar extends StatefulWidget {
 @override
 _CategoriesBarState createState() => _CategoriesBarState();
  }

 class _CategoriesBarState extends State<CategoriesBar> {
  @override
  Widget build(BuildContext context) {
   return  Align(
        alignment: Alignment.center,
        child: Text(
          "All Categories",//TODOReplace with category tapped on scrlView
          style: TextStyle(
            color: Colors.black,
            fontSize: 17.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      );
    }

I'm a newbie to flutter, apologies. if details aren't enough(let me know in the comments I'll update the question)

Update

I've tried with Navigator.push and it pops a new black screen with the "image_category" on it.

Here is what I've tried:-scrlView

@override
 Widget build(BuildContext context) {
 return Padding(
 padding: const EdgeInsets.all(0.0),
 child: GestureDetector(
onTap: () {
  print("$image_category");
   Navigator.push(
                context,
               MaterialPageRoute(
                    builder: (context) => CategoriesBar (categoryTitle: image_caption),
                )
            );
},

Here is what I've tried:-CategoriesBar

import 'package:flutter/material.dart';

class CategoriesBar extends StatefulWidget {
final String categoryTitle;
CategoriesBar({Key key, @required this.categoryTitle}) : super(key: key);
@override
_CategoriesBarState createState() => _CategoriesBarState();
}

class _CategoriesBarState extends State<CategoriesBar> {
 @override
 Widget build(BuildContext context) {
 return  Align(
    alignment: Alignment.center,
    child: Text(
      widget.categoryTitle,
      style: TextStyle(
        color: Colors.red,
        fontSize: 17.0,
        fontWeight: FontWeight.bold,
      ),
    ),
  );
}

and this is what I got:-

How is CategoriesBar widget called? Could you show that code? — Dipesh KC, Jun 01 '20 at 15:41

Shift Mora · Answer 1 · 2020-06-02T14:38:24.570

@override
Widget build(BuildContext context) {
    return Padding(
        padding: const EdgeInsets.all(0.0),
        child: GestureDetector(
            onTap: () {
                print("$image_category"); 

                Navigator.push(
                    context,
                    MaterialPageRoute(
                        builder: (context) => CategoriesBar (text: image_category),
                    )
                );
            },
        … 
        )
    )
}

And then:

import 'package:flutter/material.dart';

class CategoriesBar extends StatefulWidget {
    final String text;
    CategoriesBar ({Key key, @required this.text}) : super(key: key);
    @override
    _CategoriesBarState createState() => _CategoriesBarState();
}

class _CategoriesBarState extends State<CategoriesBar> {
    @override
    Widget build(BuildContext context) {
        return  Align(
            alignment: Alignment.center,
            child: Text(
                widget.text,
                style: TextStyle(
                    color: Colors.black,
                    fontSize: 17.0,
                    fontWeight: FontWeight.bold,
                ),
            ),
        );
    }
}

More info on Passing data between screens in Flutter

UPDATE

You should wrap your content in a Scaffold view.

import 'package:flutter/material.dart';

class CategoriesBar extends StatefulWidget {
final String categoryTitle;
CategoriesBar({Key key, @required this.categoryTitle}) : super(key: key);
@override
_CategoriesBarState createState() => _CategoriesBarState();
}

class _CategoriesBarState extends State<CategoriesBar> {
 @override
 Widget build(BuildContext context) {
  return Scaffold(
        appBar: AppBar(
         title: Text("APPBAR"),
       ), 
  body: Align(
    alignment: Alignment.center,
    child: Text(
      widget.categoryTitle,
      style: TextStyle(
        color: Colors.red,
        fontSize: 17.0,
        fontWeight: FontWeight.bold,
      ),
    ),
  ),
 );
}

Please make sure to close brackets relevantly. I typed without any code editor. Vs code gives you nice formatting and error handling capabilities.

Hey, @ShiftMora I've tried your answer and updated the question accordingly, Could you please take a look at it! — Pranav, Jun 02 '20 at 12:44

How to pass a string from one page to another on flutter?

Update

1 Answers1