如何在 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 page CategoriesBar ):-

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:-

Answer 1

@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.