화면과 로직 분리

ui&logic.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'UI & Logic - 분리 & 조립'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);
  
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Logic logic = Logic();
  UI ui = UI();
  
  @override
  Widget build(BuildContext context) {
    return ui.render(
      context: context,
      title: widget.title,
      counter: this.logic.counter,
      incrementCounter: this._incrementCounter
    );
  }
  void _incrementCounter() => setState(() => this.logic.incrementCounter());
}


class Logic{
  int counter = 0;
  void incrementCounter() => this.counter+=1;
}
class UI{
  Widget render({
    required BuildContext context,
    required String title,
    required int counter,
    required void Function() incrementCounter,
  }) => Scaffold(
    appBar: AppBar(
      title: Text(title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text(
            'You have pushed the button this many times:',
          ),
          Text(
            '$counter',
            style: Theme.of(context).textTheme.headline4,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      onPressed: incrementCounter,
      tooltip: 'Increment',
      child: Icon(Icons.add),
    ),
  );
}