Challenge 1

Build a card combining stateless and stateful widgets.

Combining Stateless and Stateful

In an app, both StatelessWidget and StatefulWidget can be used together. The outer shell is usually designed as a StatelessWidget, while the parts holding state are written as a separate StatefulWidget. This keeps the code organized and reusable.

class OuterShell extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return InnerState();
  }
}

Exercise Make a Stateless and Stateful combination

Write a function basla that prints Basladi. Write a StatelessWidget named DisKabuk; in its build method, return a StatefulWidget named IcState. In main call basla and start DisKabuk with runApp.

Show example solution

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const IcState();
  }
}

class IcState extends StatefulWidget {
  const IcState({super.key});

  @override
  State<IcState> createState() => _IcStateState();
}

class _IcStateState extends State<IcState> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home: Scaffold(body: Center(child: Text('Merhaba'))));
  }
}

void basla() {
  print('Basladi');
}

void main() {
  basla();
  runApp(const DisKabuk());
}

Exercise Make a counter card

Write a function baslat that prints Kart hazir. Write a StatelessWidget named SayacKarti; in its build method, return a StatefulWidget named SayacState. Let SayacState have an int counter variable with initial value 0. In main call baslat and start with runApp.

Show example solution

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return const SayacState();
  }
}

class SayacState extends StatefulWidget {
  const SayacState({super.key});

  @override
  State<SayacState> createState() => _SayacStateState();
}

class _SayacStateState extends State<SayacState> {
  int _sayac = 0;

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(child: Text('$_sayac')),
      ),
    );
  }
}

void baslat() {
  print('Kart hazir');
}

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

Test yourself

Which approach is correct when combining StatelessWidget and StatefulWidget?
- Only MaterialApp is used
- Outer shell StatelessWidget, inner stateful part StatefulWidget
- All widgets must be StatelessWidget
- All widgets must be StatefulWidget
Show answer

Outer shell StatelessWidget, inner stateful part StatefulWidget — The outer shell is Stateless, the inner stateful part is Stateful; this provides organized and reusable code.

Add the StatefulWidget name

class DisKabuk extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ____();
  }
}

Show answer

class DisKabuk extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return IcState();
  }
}

Stateless and Stateful parts

StatelessWidget

Outer shell
StatefulWidget

Inner stateful widget
build

Method that builds the widget
setState

Method that updates state

Next lesson: Challenge 2

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies