DEV Community

Shalim Khan
Shalim Khan

Posted on • Updated on

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

Top comments (0)