Your First Flutter App - via CodePen!

You will need a CodePen account.

Log in to your CodePen account

• CodePen can be found at codepen.io
• Basic accounts are free at the time of writing

Create a new Flutter app

• Select "New Flutter Pen" in the CodePen sidebar
  • Find the "Create" menu in the sidebar
  • Click the arrow next to the word "Pen"
  • Select "Flutter Pen" from the menu that appears

Remove the debug banner from the corner

• Change the MaterialApp widget so it looks like this:

  MaterialApp(
        home: MyWidget(),
        debugShowCheckedModeBanner: false,
      ),

Change the default text to something more interesting

• Change the MyWidget widget to look like this:

  class MyWidget extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Text(
            'Hello World',
            style: TextStyle(
              color: Colors.pink.shade600,
              fontSize: 50,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
      );
    }
  }

Edit the text attributes to see what happens

• Try changing the font size to 25
• or change the colour to blue
• or change the font weight to normal