CodeBlanks Logo Icon CodeBlanks
Login Register

What is Flutter?

Learn that Flutter is a cross-platform UI toolkit made by Google.

What is Flutter?

Flutter is an open-source UI toolkit developed by Google. With a single codebase you build apps for iOS, Android, web and desktop. The UI is built by nesting reusable blocks called widgets.

import 'package:flutter/material.dart';

void main() {
  runApp(Center(child: Text('Hello Flutter')));
}

Widgets

In Flutter, everything on screen is a widget: buttons, text, alignment, even the app itself. Widgets nest to form a tree. StatelessWidget is for static UI, StatefulWidget for UI that changes with user interaction.

Center(
  child: Text('Counter: 0'),
)

Practice Your first Flutter app

Inside main, first print a message with print('Flutter çalışıyor'), then run a Text('Merhaba') widget wrapped in a Center widget using runApp.

Starter code

main.dart
import 'package:flutter/material.dart';

void main() {
  // önce print ile mesaj yazdır

  // sonra runApp ile Text widget'ını çalıştır

}

Sample solution

main.dart
import 'package:flutter/material.dart';

void main() {
  print('Flutter çalışıyor');
  runApp(Center(child: Text('Merhaba')));
}

Expected output

Flutter çalışıyor

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 What is Flutter built for?

  • To write only Android apps
  • To publish server-side web services
  • To provide a database management system
  • Build UIs for multiple platforms from a single codebase Correct answer

Explanation: Flutter is a UI toolkit; it produces mobile, web and desktop UIs from one codebase.

2 Run the app

Question 
import 'package:flutter/material.dart';

void main() {
  ____(Center(child: Text('Selam')));
}
Answer 
import 'package:flutter/material.dart';

void main() {
  runApp(Center(child: Text('Selam')));
}

Explanation: runApp is the root function that attaches a Flutter app to the screen.

3 Flutter concepts

Term Meaning
Google Company that develops Flutter
cross-platform Single code, multiple platforms
widget Building block of UI
Dart Language used by Flutter

All lessons in Beginner

1 Intro to Flutter

  1. What is Flutter?
  2. Dart and Flutter
  3. SDK and setup
  4. flutter doctor
  5. Summary - Flutter setup

2 First app

  1. flutter create
  2. Project structure
  3. main and runApp
  4. Hot reload
  5. Summary - First app

3 Widget basics

  1. What is a widget?
  2. Widget tree
  3. BuildContext
  4. Material and Cupertino
  5. Summary - Widget basics

4 StatelessWidget

  1. What is StatelessWidget?
  2. The build method
  3. Passing parameters
  4. const constructor
  5. Summary - StatelessWidget

5 StatefulWidget

  1. What is StatefulWidget?
  2. createState and State
  3. The setState method
  4. initState and dispose
  5. Summary - StatefulWidget

6 Text and Container

  1. The Text widget
  2. TextStyle
  3. Container
  4. BoxDecoration
  5. Summary - Text and Container

7 Column and Row

  1. Column
  2. Row
  3. MainAxisAlignment
  4. CrossAxisAlignment
  5. Summary - Column and Row

8 Padding and margin

  1. The Padding widget
  2. EdgeInsets
  3. Container margin
  4. Spacing strategy
  5. Summary - Padding and margin

9 SizedBox and Center

  1. SizedBox
  2. The Center widget
  3. SizedBox.expand
  4. The Align widget
  5. Summary - SizedBox and Center

10 ListView

  1. What is ListView?
  2. ListView.builder
  3. ListTile
  4. Separator
  5. Summary - ListView

11 GestureDetector

  1. What is GestureDetector?
  2. onTap and onDoubleTap
  3. onLongPress
  4. onHorizontalDragUpdate
  5. Summary - GestureDetector

12 InkWell

  1. What is InkWell?
  2. InkWell vs GestureDetector
  3. Material parent
  4. onTap callback
  5. Summary - InkWell

13 ElevatedButton

  1. What is ElevatedButton?
  2. onPressed and child
  3. TextButton and OutlinedButton
  4. Button style
  5. Summary - ElevatedButton

14 TextFormField

  1. What is TextFormField?
  2. TextEditingController
  3. decoration and label
  4. obscureText
  5. Summary - TextFormField

15 Todo app

  1. Project skeleton
  2. Add screen
  3. List and onTap
  4. Delete and divider
  5. Summary - Todo app

16 Images

  1. AssetImage
  2. Image.network
  3. Image.file
  4. fit and size
  5. Summary - Images

17 Scaffold and AppBar

  1. What is Scaffold?
  2. AppBar
  3. FloatingActionButton
  4. Drawer
  5. Summary - Scaffold and AppBar

18 Navigator

  1. What is Navigator?
  2. Navigator.push
  3. MaterialPageRoute
  4. Navigator.pop
  5. Summary - Navigator

19 Counter app

  1. Project skeleton
  2. State and counter
  3. Increment button
  4. Decrement button
  5. Summary - Counter app

20 Beginner final

  1. Challenge 1
  2. Challenge 2
  3. Challenge 3
  4. Challenge 4