This is a test message to test the length of the message box.
Flutter Everthing is a Widget
Created by Software-Heroes

Flutter - Everthing is a Widget


Actually, everything is a widget in Flutter, the basic principle we will briefly explain in today's article and show you an example.

Everything is a widget! With this statement you can describe the framework Flutter well. In the framework, all elements consist of widgets or objects. And even seemingly simple objects again consist of different basic elements. In today's article we want to take a closer look at the topic and give you a closer look at how the framework works.



Everything is a widget. We want to introduce this to you using the example of the Card widget. This widget itself consists of countless small widgets the collaborations. Each widget is an object and is built as a widget tree, so you get as in the web development a tree over which you can search and navigate.

So let's take a look at the basic components of the Card Widget, where the Child element represents the passed element to Card. The overview you get in Android Studio on the Flutter Inspector:

  • Semantics
  • Container
  • Padding
  • Material
  • _MaterialInterator
  • PhysicalShape
  • _ShapeBorderPainter
  • CustomPaint
  • NotificationListener
  • _inkFeatures
  • AnimatedDefaultTextStyle
  • DefaultTextStyle
  • Semantics
  • Child


At first glance you can already see the complexity of simple widgets like a card. In the next section, we'll show you how to easily use such widgets.


Building a app

An app has a so-called root widget that forms the basis of the app. Depending on the design, you can access the CuppertinoApp or the MaterialApp here, depending on what app you want to have as basic design. In our examples we show you the material design, as our apps are based on this design.

class App extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Example',
      home: HomePage(),


After the MaterialApp widget, you'll need a page that displays the app and uses it as a background. In this case, a scaffold is included, which provides a blank page. With the parameter for Body, we provide the empty page with a centered text.

class HomePage extends StatelessWidget {
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Hello World'),


To start the app, all you have to do is run the main function and submit your root widget, then your first app is ready to run and can be further built with additional features.

void main() => runApp(App());


After starting the virtual device, you'll already see the first result: A blank page with centered text:



As you can easily understand from the example, all in Flutter consists of various small widgets the collaborations and as in the web development form a widget tree. Many standard widgets that we will use together have many smaller widgets. And with already little effort and small widgets, you'll already get your first app on the screen.

Included topics:
Comments (0)

And further ...

Are you satisfied with the content of the article? We post new content in the ABAP area every Friday and irregularly in all other areas. Take a look at our tools and apps, we provide them free of charge.

Flutter - Finance Overview (Framework)

Category - Flutter

Before we actually start developing the app, we will first work on the second version of the SwH framework in order to create a reusable basis.


Flutter - Finance Overview (Data)

Category - Flutter

Today we are talking about the data model of the app in the first preview, the design of the API and the challenges involved.


Flutter - Finance Overview (Project)

Category - Flutter

We start a new project and take you through the various stages from planning to development to release. In this article the explanation of what stands behind the project.


Flutter - #FlutterEngage

Category - Flutter

The FlutterEngage event is over and there was again a lot of helpful and interesting information for all Flutter developers among us. We want to briefly summarize the most important points here.


Flutter - Learning source

Category - Flutter

In this article we want to introduce you to some current learning sources that you can use as inspiration and for further education. Here we will mainly deal with YouTube channels and present some.