What is a custom widget?

Write your own widget as a StatelessWidget.

What is a custom widget?

A custom widget is a StatelessWidget subclass that you define. You override the build method to draw the interface you want. You write it once and use it in many places.

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

  @override
  Widget build(BuildContext context) {
    return const Text('Merhaba');
  }
}

Adding a const constructor lets the widget sit as a constant in the widget tree and improves performance.

The build method and Widget return

The build method must return a Widget. Flutter draws this widget on screen. The method signature is Widget build(BuildContext context); context represents the position in the widget tree.

@override
Widget build(BuildContext context) {
  return const Padding(
    padding: EdgeInsets.all(8),
    child: Text('Selam'),
  );
}

The returned widget can be a simple Text or a deep tree nesting many widgets.

Exercise Define BaslikWidget

Define a StatelessWidget named BaslikWidget. Add a const constructor and have the build method return Text('Merhaba'). Print 'hazir' in main.

Show example solution

import 'package:flutter/widgets.dart';

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

  @override
  Widget build(BuildContext context) {
    return const Text('Merhaba');
  }
}

void main() {
  print('hazir');
}

Test yourself

What is the correct way to define a custom widget?
- Call http.get
- Write a function returning a Future
- Extend StatelessWidget and override the build method
- Create an sqflite table
Show answer

Extend StatelessWidget and override the build method — A custom widget is a class that extends StatelessWidget and overrides the build method. A Future function is for async work, sqflite is a database, and http.get is a network request; none of these define a widget.

Extend StatelessWidget

class Baslik ____ {
  const Baslik({super.key});

  @override
  Widget build(BuildContext context) {
    return const Text('Merhaba');
  }
}

Show answer

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

  @override
  Widget build(BuildContext context) {
    return const Text('Merhaba');
  }
}

Custom widget parts

class Baslik

Class declaration
extends StatelessWidget

Inheritance
build metodu

UI rendering
const constructor

Const constructor

Next lesson: Composition

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies