PLEASE ANSWER WRTE FOR FLUTTER CODE REQUREMENTS TASKS

NOTE: You have to use the exact names that I ask you to use. When I tell you to use LightButton, any of these will not give you a full grade for the task: lightButton, Lightbutton, LightSwitch, etc. Use the exact names that I give for widgets, props, state fields, etc.

Task 1.

Create a Flutter app. Your app should have four widgets: MyApp, MyHomePage, LightBulb and LightButton. Among these, MyApp and MyHomePage are already there in the example project you start with. You need to modify MyHomePage a bit, as explained below.

Each of these four widgets should be stateless widgets with build() functions.

MyApp has a MaterialApp that contains MyHomePage as its home child (this is already there).

MyHomePage has a Scaffold, receives a title in its constructor and uses it in its appBar (this is already there). The value of this title is SE 380 Lab 2. However, we want MyHomePage to be a stateless widget, unlike the sample code.

In the body of the Scaffold, it should have a Center with a Column widget that holds the LightBulb and LightButton widgets as its children (Center and Column are already there). We do not want a floatingActionButton, so remove it.

LightBulb and LightButton are also stateless widgets. They do not receive anything in their constructors, yet.

LightBulb has a Container, which has green color (Colors.green) and a padding of 5 (new EdgeInsets.all(5.0)). The Container has a Text as its child. The Text has OFF as its data.

LightButton has a Container, which has red color and a padding of 5. The Container has a MaterialButton as a child, which has blue color, black textColor, and null as the onPressed handler. The MaterialButton has a Text as a child, which says Turn light on.

The app should look like the screenshot below.

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.

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: