Counter App With atomic_flutter

ဒီ article ထဲမှာတော့ atomic_flutter package ကို အသုံးပြုပြီး counter app တည်ဆောက်ပုံလို့ လေ့လာကြည့်ရအောင်ပါ။

အရင်ဆုံး flutter project တခုဆောက်လိုက်ကြရအောင်ပါ။ command line က ဖြစ်ဖြစ်၊ vs code ကနေဖြစ်ဖြစ်၊ android studio ကနေဖြစ်ဖြစ် ဆောက်လိုက်လို့ ရပါတယ်။ comment line တွေ ဖယ်လိုက်ရင်တော့ အခုလိုမျိုး ထွက်လာမှာပဲ ဖြစ်ပါတယ်။

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,

        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}

app ကို run လိုက်ရင် default counter app ကို အခုလိုပဲ မြင်ရမှာဖြစ်ပါတယ်။

app run လို့ရပြီဆိုatomic_flutter package နဲ့ ဘယ်လိုပြောင်းရေးမလဲ ကြည့်လိုက်ရအောင်ပါ။

အရင်ဆုံး package ကို dependency အနေနဲ့ ထည့်လိုက်ပါမယ်။

flutter pub add atomic_flutter

ပြီးရင်တော့ main.dart file ထဲမှာ package ကို import လုပ်ပြီး counter atom ကို ရေးလိုက်ပါမယ်။

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

final counterAtom = Atom(0);

ပြီးရင်တော့ နဂိုပါပြီးသား _incrementCounter method ကို အခုလိုမျိုး ပြောင်းလိုက်ပါမယ်။

// Before
void _incrementCounter() {
  setState(() {
    _counter++;
  });
}

// After
void _incrementCounter() {
  counterAtom.update((current) => current + 1);
}

လက်ရှိ counter value ကို ပြတဲ့ Text widget ကိုလဲ AtomBuilder နဲ့ပြောင်းပြီး ရေးလိုက်ပါမယ်။

// Before
Text(
  '$_counter',
  style: Theme.of(context).textTheme.headlineMedium,
),

// After
AtomBuilder(
  atom: counterAtom,
  builder: (context, counter) {
    return Text(
      '$counter',
      style: Theme.of(context).textTheme.headlineMedium,
    );
  },
),

ဒါဆိုရင်တော့ atomic_flutter နဲ့ ရေးထားတဲ့ counter app ကို ရပြီပဲ ဖြစ်ပါတယ်။

main.dart ရဲ့ code အပြည့်အစုံကို အောက်မှာ ပေးထားပါတယ်။

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

final counterAtom = Atom(0);

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
      ),
      home: const MyHomePage(title: 'AtomicFlutter Counter'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  void _incrementCounter() {
    counterAtom.update((current) => current + 1);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const Text('You have pushed the button this many times:'),
            AtomBuilder(
              atom: counterAtom,
              builder: (context, counter) {
                return Text(
                  '$counter',
                  style: Theme.of(context).textTheme.headlineMedium,
                );
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}