Question: Please rewrite according to the requirements in task 2 and task3 according to the following flutter code. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class

Please rewrite according to the requirements in task 2 and task3 according to the following flutter code. import 'package:flutter/material.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'SE 380 Lab 2'), ); } } class MyHomePage extends StatelessWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override Widget build(BuildContext context){ return Scaffold( appBar: AppBar( title: Text(title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ LightBulb(), LightButton(), ], ), ), ); } } class LightBulb extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.green, padding: new EdgeInsets.all(5.0), child: Text("OFF"), ); } } class LightButton extends StatelessWidget { @override Widget build(BuildContext context) { return Container( color: Colors.red, padding: new EdgeInsets.all(5.0), child:MaterialButton( color: Colors.blue, textColor: Colors.white, onPressed: (){}, child: Text("Turn light on"), ) ); } } 

Task 2.

Now we want to make the LightButton change the text of the LightBulb. For this, we will convert LightButton to a stateful widget because it will be easy to do. However, we will have to make the LightBulb be a child of LightButton, since the state only affects the stateful widgets subtree in the hierarchy.

Move LightBulb from MyHomePage to the LightButton, as a sibling of the MaterialButton widget inside the Container of LightButton. To have multiple children, you will need to add a column to LightButton.

Convert LightButton to be a stateful widget.

Initialize the state by creating a variable in LightButton as bool isLightOn = false;

When the Button is pressed, toggle the value of isLightOn (i.e., make it true if it was false and vice versa). Do this change in a function that you pass to setState.

Add a constructor argument and field to LightBulb named isLit. This will either be true or false. Give the isLightOn value from LightButtons state to LightBulb through this argument.

Change LightBulb so that it says OFF when isLit is false and says ON when isLit is true. You can create a local variable inside the build() function for this.

When you click the button, you should see ON and OFF alternating in the LightBulb, as in the images below.

Task 3.

Now also change the Buttons title according to the state. Use Turn light on and Turn light off as appropriate.

Also, change the LightBulbs Views color to red when its off, so that it blends to the background. Now our screen should switch between these two images:

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!