How do I pass a variable to a child widget?

Question

I am passing a string value `final String userLogin; from another file via Route.

class AutfPasswordWidget extends StatefulWidget {
    final String userLogin;
  AutfPasswordWidget({Key? key, required this.userLogin}) : super(key: key);

  @override
  State<AutfPasswordWidget> createState() => _AutfPasswordWidgetState();
}
final iconColor = const Color(0xFF2787F5);

class _AutfPasswordWidgetState extends State<AutfPasswordWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,
        leading: BackButton(
        color: Colors.grey
   ), 
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min, // Иконка по центру несмотря на кнопку назад
            children: [
          Icon(Icons.telegram_sharp, color: iconColor),
          Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
          Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          )),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            _MainInfoWidget(),
          ],
        ),
      ),
    );
  }
}

But I need to use the resulting value in another widget 'Use password for $userLogin' , located under it.

class _MainInfoWidget extends StatelessWidget {
  const _MainInfoWidget({Key? key,}) : super(key: key);


  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            Icons.telegram_sharp,
            color: iconColor,
            size: 64,
          ),
          SizedBox(height: 20),
          Text('Password',
              style: AppAuthTitleStyle.LinkButton),
          SizedBox(height: 20),
          Text(
            'Use password for $userLogin' ,
            style: AppDescribeTittleStyle.LinkButton,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}

How do I pass the value to the desired widget ?

Answer 1

You can pass userLogin to _mainInfoWidget() by accesing the parent variable using widget.userLogin:

 _MainInfoWidget(userLogin: widget.userLogin),

Complete example:

class AutfPasswordWidget extends StatefulWidget {
  final String userLogin;
  AutfPasswordWidget({Key? key, required this.userLogin}) : super(key: key);

  @override
  State<AutfPasswordWidget> createState() => _AutfPasswordWidgetState();
}

final iconColor = const Color(0xFF2787F5);

class _AutfPasswordWidgetState extends State<AutfPasswordWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          centerTitle: true,
          leading: BackButton(color: Colors.grey),
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize:
                MainAxisSize.min, // Иконка по центру несмотря на кнопку назад
            children: [
              Icon(Icons.telegram_sharp, color: iconColor),
              Padding(
                  padding:
                      const EdgeInsets.symmetric(horizontal: 2, vertical: 2)),
              Text('ID', style: TextStyle(color: Colors.black, fontSize: 18)),
            ],
          )),
      body: Padding(
        padding: const EdgeInsets.all(20),
        child: ListView(
          children: [
            _MainInfoWidget(userLogin: widget.userLogin),
          ],
        ),
      ),
    );
  }
}

class _MainInfoWidget extends StatelessWidget {
  final String? userLogin;
  const _MainInfoWidget({
    this.userLogin,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 20),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Icon(
            Icons.telegram_sharp,
            color: iconColor,
            size: 64,
          ),
          SizedBox(height: 20),
          Text(
            'Password',
          ),
          SizedBox(height: 20),
          Text(
            'Use password for $userLogin',
            // style: AppDescribeTittleStyle.LinkButton,
            textAlign: TextAlign.center,
          ),
        ],
      ),
    );
  }
}