0

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())], ) ], ), ), ); } } 

1 Answer 1

0

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

Sign up to request clarification or add additional context in comments.

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.