Please rewrite according to the requirements in task 2 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. Hint: when the cursor is on MaterialButton, press Alt+Enter and select Wrap with Column to place the MaterialButton in the list of children of a Column. Then add the LightButton as another child.

Convert LightButton to be a stateful widget. Hint: when the cursor is on the LightButton class definition, press Alt+Enter and select Convert to Stateful Widget. Note: hot reload wont work at this point and you will see a red error. Restart the app to fix this.

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. Hint: https://flutter.io/flutter-for-react-native/#props

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.