The difference between the main and runapp functions in Flutter

The main() and the runapp() functions are two components a user must be familiarized with while developing a Flutter project. Although used together, these two functions are very different.

Syntax for main()

void main(){
    //code
}

Syntax for runapp()

The runapp() function takes in a parameter, the base widget of all the widgets we need to use in our application. In simpler words, this widget is the foundation block that holds all the widgets together in our application:

runapp(<widget>);

Differences

The following table represents the significant differences between the two functions:

Main()

Runapp()

Entry point of Dart programs.

Entry point for the Flutter framework.

Without it, the application will not run.

Without it, Dart programs can still run without Flutter components.

No imports required for it to work.

`flutter/material.dart` package required for it to work.

Examples

Let's take a look at how these two functions work to execute a Flutter program:

import 'package:flutter/material.dart';

void main() {
  runApp(OurApp());
}

class OurApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Our App',
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: ACenterClass(),
      ),
    );
  }
}

class ACenterClass extends StatefulWidget {
  @override
  _ACenterClassState createState() => _ACenterClassState();
}

class _ACenterClassState extends State<ACenterClass> {
  var pressRemoteCount = 0;

  void pressRemote() {
    setState(() {
      pressRemoteCount = pressRemoteCount + 1;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        alignment: Alignment.center,
        width: 350.00,
        height: 100.00,
        decoration: BoxDecoration(
          color: Colors.green,
          border: Border.all(
            color: Colors.deepOrange,
            width: 2.0,
            style: BorderStyle.solid,
          ),
          borderRadius: BorderRadius.all(Radius.circular(40.0)),
          boxShadow: [
            BoxShadow(
              color: Colors.black54,
              blurRadius: 20.0,
              spreadRadius: 20.0,
            ),
          ],
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Colors.red,
              Colors.white,
            ],
          ),
        ),
        child: Column(
          children: [
            Text(
              '$pressRemoteCount',
              style: TextStyle(
                fontSize: 30.0,
                color: Colors.blue,
              ),
            ),
            SizedBox(
              height: 10.0,
            ),
            ElevatedButton(
              child: Text(
                'Press Button',
                style: TextStyle(
                  fontSize: 30.0,
                  color: Colors.white,
                ),
              ),
              onPressed: pressRemote,
            ),
          ],
        ),
      ),
    );
  }
}

Explanation

  • Lines 3–5: The main() function calls the runapp() function that has OurApp() widget as a parameter. When we run the application, the entry point will be the main() function, which will run the runapp() function, which in turn provides the MyApp() widget that will contain all the other widgets.

  • Lines 7–18: The definition of OurApp() widget with its characteristics and information it will display. It contains four fields: title (application display title), debugShowCheckedmodeBanner (flag to set the debug mode option), home (MyHomePage widget to show what the main page will look like), and a body (what will be included in the body of the program).

  • Lines 20–32: The ACenterClass widget will have a state to reflect changes in our application based on user actions. It has a data member named title and a state which calls the _ACenterClassState() method.

  • Lines 35–91: This is the widget that displays the counter button on the page. It has several properties and classes that define the counter button's look.

    • The Container class can be viewed as a box containing sub-elements/widgets to be displayed on the website. It has properties that define its alignment, width, height along with other properties as well. It also uses other classes as well for design.

    • The onpressed property is used to increment the value displayed on the counter button.

Now, to verify that the main() function still runs without the runapp() function, let's take the following example:

void main() {
    print('Hello World');
}

However, the runapp() function will not run without the main() function:

runapp(MyApp());
class MyApp extends StatelessWidget{
    const MyApp():super();
}

Conclusion

The main() function and the runapp() function are two essential components of a Flutter application. They work together in Flutter projects.

Free Resources

Copyright ©2026 Educative, Inc. All rights reserved