Learn Separation of Logic from Widgets | Writing Clean Dart for Scalable Flutter Apps

When building Flutter apps, it is important to keep your business logic, such as data fetching, processing, or calculations, separate from your widget code. This means that widgets should focus on displaying the UI, while dedicated classes or services handle the underlying logic. By doing this, you can make your code more organized, easier to maintain, and simpler to test.

Note

Keeping business logic out of widgets helps you avoid tightly coupled code, making it easier to update or reuse logic in different parts of your app without affecting the UI.

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
            
// main.dart

import 'package:flutter/material.dart';

// A service class that handles business logic.
class CounterService {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}

// A widget that uses the CounterService.
class CounterWidget extends StatefulWidget {
  final CounterService service;

  CounterWidget({required this.service});

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  void _handleIncrement() {
    setState(() {
      widget.service.increment();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: �{widget.service.count}'),
        ElevatedButton(
          onPressed: _handleIncrement,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

void main() {
  final counterService = CounterService();
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: CounterWidget(service: counterService),
      ),
    ),
  ));
}

Separating logic from widget code has several benefits. It makes your app easier to test, since you can write unit tests for your logic classes without needing to run the UI. It also improves maintainability, because changes to business logic do not require you to modify your widgets, and vice versa. This clear separation leads to cleaner, more scalable code as your Flutter project grows.

main.dart


              1234567891011121314151617181920212223242526272829303132
            
// main.dart

import 'package:flutter/material.dart';

// Logic class separated from the widget.
class GreetingService {
  String getGreeting(String name) {
    return 'Hello, $name!';
  }
}

class GreetingWidget extends StatelessWidget {
  final GreetingService service;

  GreetingWidget({required this.service});

  @override
  Widget build(BuildContext context) {
    return Text(service.getGreeting('Dart Developer'));
  }
}

void main() {
  final greetingService = GreetingService();
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: GreetingWidget(service: greetingService),
      ),
    ),
  ));
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 4

Ask AI

Ask anything or try one of the suggested questions to begin our chat

Swipe to show menu

Note

Keeping business logic out of widgets helps you avoid tightly coupled code, making it easier to update or reuse logic in different parts of your app without affecting the UI.

main.dart


              1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556
            
// main.dart

import 'package:flutter/material.dart';

// A service class that handles business logic.
class CounterService {
  int _count = 0;

  int get count => _count;

  void increment() {
    _count++;
  }
}

// A widget that uses the CounterService.
class CounterWidget extends StatefulWidget {
  final CounterService service;

  CounterWidget({required this.service});

  @override
  _CounterWidgetState createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  void _handleIncrement() {
    setState(() {
      widget.service.increment();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text('Count: �{widget.service.count}'),
        ElevatedButton(
          onPressed: _handleIncrement,
          child: Text('Increment'),
        ),
      ],
    );
  }
}

void main() {
  final counterService = CounterService();
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: CounterWidget(service: counterService),
      ),
    ),
  ));
}

main.dart


              1234567891011121314151617181920212223242526272829303132
            
// main.dart

import 'package:flutter/material.dart';

// Logic class separated from the widget.
class GreetingService {
  String getGreeting(String name) {
    return 'Hello, $name!';
  }
}

class GreetingWidget extends StatelessWidget {
  final GreetingService service;

  GreetingWidget({required this.service});

  @override
  Widget build(BuildContext context) {
    return Text(service.getGreeting('Dart Developer'));
  }
}

void main() {
  final greetingService = GreetingService();
  runApp(MaterialApp(
    home: Scaffold(
      body: Center(
        child: GreetingWidget(service: greetingService),
      ),
    ),
  ));
}

Everything was clear?

Thanks for your feedback!

Section 3. Chapter 4