I want the Expanded widget to change dependent on 'Button 1', 'Button 2' or "Button 3' is pressed. The buttons is just text wrapped in a InkWell, I can change this, but it is only for purpose of understanding how to make the Expanded to be defendant on the button push.

I have read quite a few post on this, but it is not clear to me how to do this.

IF there is a better way to do this, please tell me.

Your help is appreciated.

import 'package:flutter/material.dart';

double selectedScreen = 1;

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget middleScreen() {
    if (selectedScreen == 1) {
      return FirstScreen();
    } else if (selectedScreen == 2) {
      return SecondScreen();
    } else {
      return ThirdScreen();
    }
  }

  Container FirstScreen() {
    return Container(child: Text('FirstScreen'));
  }

  Container SecondScreen() {
    return Container(child: Text('SecondScreen'));
  }

  Container ThirdScreen() {
    return Container(child: Text('ThirdScreen'));
  }

  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                InkWell(
                  onTap: () {
                    selectedScreen = 1;
                  },
                  child: Column(
                    children: [
                      Text(
                        'Buttonn 1',
                      ),
                    ],
                  ),
                ),
                InkWell(
                  onTap: () {
                    selectedScreen = 2;
                  },
                  child: Column(
                    children: [
                      Text(
                        'Button 2',
                      )
                    ],
                  ),
                ),
                InkWell(
                  onTap: () {
                    selectedScreen = 3;
                  },
                  child: Column(
                    children: [
                      Text(
                        'Button 3',
                      )
                    ],
                  ),
                ),
              ],
            ),
            Container(
              height: 30,
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [Expanded(child: middleScreen())],
            )
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Simply, due to its a stateful widget, we have to notify it's new state

The only thing you need is setState method

just wrap selectedScreen = ... parts with setState(() { ... });

A sample could be like below

setState(() { selectedScreen = 1;});

you can try it here

CodePudding user response：

You would have to make use of setState to notify the framework that the state of the widget has changed. This article here should be able to clear up everything for you in a better way:

Adding interactivity to your Flutter app - setState