Project skeleton

Build the counter app skeleton with Scaffold.

Counter skeleton

To set up the skeleton of a counter app, you use a Scaffold. The appBar parameter shows a title in an AppBar, while the body parameter contains a Text widget that will show the counter value. Scaffold forms the skeleton of a Material app screen.

Scaffold(
  appBar: AppBar(title: Text('Counter')),
  body: Center(child: Text('0')),
)

Title with AppBar

An AppBar is given to the appBar parameter of Scaffold. The title parameter of AppBar carries the app's title text. In a counter app, the title is usually a text such as 'Counter'.

Scaffold(
  appBar: AppBar(title: Text('Counter')),
)

Exercise Set up the counter skeleton

Write a function baslat that prints Sayac basladi. In main call baslat. Give the Scaffold the appBar (AppBar(title: Text('Sayac'))) and body (Center(child: Text('0'))) parameters.

Show example solution

import 'package:flutter/material.dart';

void baslat() {
  print('Sayac basladi');
}

void main() {
  baslat();
  runApp(const Uygulama());
}

class Uygulama extends StatelessWidget {
  const Uygulama({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Sayac')),
        body: Center(child: Text('0')),
      ),
    );
  }
}

Test yourself

Which widget is given to the body parameter to show the counter value on screen?
- SizedBox
- Padding
- Center containing Text
- AppBar
Show answer

Center containing Text — To show the counter value, body is usually given a Text widget inside Center; SizedBox, Padding and AppBar are not for this purpose.

Add the appBar parameter

Scaffold(
  ____: AppBar(title: Text('Sayac')),
  body: Center(child: Text('0')),
)

Show answer

Scaffold(
  appBar: AppBar(title: Text('Sayac')),
  body: Center(child: Text('0')),
)

Counter skeleton parts

Scaffold

Forms the screen skeleton
AppBar

Top app bar
body

Main content area
Text

Widget showing the counter

Next lesson: State and counter

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies