Flutter - How to render a widget on button click?

Question

Hi I'm new to flutter and I have an issue. I created simple app for better explanation. In my main.dart I call Button1() which is in button1.dart. When i press the button it should call Button2() in button2.dart. But the second button is not rendering. How can i do it? And how can i change some data in the button2.dart? For example change text of the button. I set text of the button to some variable and how can i pass it when i click the first button?

Thanks

My main.dart code

import 'package:flutter/material.dart';
import 'button1.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  MyHomePageState createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My app"),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Button1(),
          ],
        ),
      ),
    );
  }
}

My button1.dart code

import 'button2.dart';

class Button1 extends StatefulWidget {
  @override
  _Button1State createState() => _Button1State();
}

class _Button1State extends State<Button1> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("button1"),
            onPressed: () {
              setState(() {
                Button2();
              });
            },
          ),
        ],
      ),
    );
  }
}

and here is my button2.dart code


class Button2 extends StatefulWidget {
  @override
  _Button2State createState() => _Button2State();
}

class _Button2State extends State<Button2> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("Button2"),
            onPressed: () {},
          ),
        ],
      ),
    );
  }
}

What exactly trying to achieve? Do you want to change the text of one button, display the second button on first button press, or both? — Mick
Mainly how to display the button. But I also need to change some data of other widget when i press the button. So both. — Matěj Michálek

towhid towhid · Accepted Answer · 2020-07-31T17:54:39

I assume you are new to programming and I am trying to explain the concept here as easy as possible..

Let you have your main class (Parent). It contains your two widget/buttons (Children). To pass data from one children to another you can have a variable in the parent class and share your data through it. Here is an example..

class Parent{
String sharedData = "";
bool isVisible = false;

  build(context){
    //...
      Child1((String newData){
        setState(() {
          sharedData = newData;
          isVisible = true;
        });
      }),
     if(isVisible) Child2(sharedData),
    }
}

Here Child1 is using a callback to update the data. Inside setState it is updating the Parent class variable and also rebuilding the widget tree. Which updates the Child2 classes data. Hope you got the point...

Flutter - How to render a widget on button click?

1 Answers