please rewrite this flutter code according to the following task

Task .

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.

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: 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"), ) ); } }