perf: three micro-optimizations for render performance and state management

lib/home_page.dart

@@ -121,12 +121,26 @@ class _MyHomePageState extends ConsumerState<MyHomePage> {
       body: IndexedStack(
         index: ref.watch(mySettingsProvider).currentTabIdx,
         children: <Widget>[
-          ListView(controller: _scrollController1, children: basicDemos),
-          ListView(controller: _scrollController2, children: advancedDemos),
-          ListView(controller: _scrollController3, children: inactionDemos),
-          ListView(
-            controller: _scrollController4,
-            children: bookmarkAndAboutDemos,
+          RepaintBoundary(
+            child: ListView(controller: _scrollController1, children: basicDemos),
+          ),
+          RepaintBoundary(
+            child: ListView(
+              controller: _scrollController2,
+              children: advancedDemos,
+            ),
+          ),
+          RepaintBoundary(
+            child: ListView(
+              controller: _scrollController3,
+              children: inactionDemos,
+            ),
+          ),
+          RepaintBoundary(
+            child: ListView(
+              controller: _scrollController4,
+              children: bookmarkAndAboutDemos,
+            ),
           ),
         ],
       ),

lib/routes/aiml_groq_ex.dart

@@ -225,6 +225,39 @@ class MyMessageBubbleTile extends StatelessWidget {
     required this.isMe,
   });
 
+  static const _kMeMargin = EdgeInsets.only(
+    top: 8.0,
+    bottom: 8.0,
+    left: 80.0,
+  );
+  static const _kOtherMargin = EdgeInsets.only(
+    top: 8.0,
+    bottom: 8.0,
+    right: 80.0,
+  );
+  static const _kPadding = EdgeInsets.symmetric(
+    horizontal: 15.0,
+    vertical: 10.0,
+  );
+  static const _kMeRadius = BorderRadius.only(
+    topLeft: Radius.circular(15.0),
+    bottomLeft: Radius.circular(15.0),
+    bottomRight: Radius.circular(15.0),
+  );
+  static const _kOtherRadius = BorderRadius.only(
+    topRight: Radius.circular(15.0),
+    bottomLeft: Radius.circular(15.0),
+    bottomRight: Radius.circular(15.0),
+  );
+  static const _kMeDecoration = BoxDecoration(
+    color: Color(0xFFE0E0E0),
+    borderRadius: _kMeRadius,
+  );
+  static const _kOtherDecoration = BoxDecoration(
+    color: Color(0xFFBBDEFB),
+    borderRadius: _kOtherRadius,
+  );
+
   final String message;
   final bool isMe;
 
@@ -240,24 +273,9 @@ class MyMessageBubbleTile extends StatelessWidget {
     final msgBubble = Align(
       alignment: isMe ? Alignment.centerRight : Alignment.centerLeft,
       child: Container(
-        margin: isMe
-            ? EdgeInsets.only(top: 8.0, bottom: 8.0, left: 80.0)
-            : EdgeInsets.only(top: 8.0, bottom: 8.0, right: 80),
-        padding: EdgeInsets.symmetric(horizontal: 15.0, vertical: 10.0),
-        decoration: BoxDecoration(
-          color: isMe ? Colors.grey[300] : Colors.blue[100],
-          borderRadius: isMe
-              ? BorderRadius.only(
-                  topLeft: Radius.circular(15.0),
-                  bottomLeft: Radius.circular(15.0),
-                  bottomRight: Radius.circular(15.0),
-                )
-              : BorderRadius.only(
-                  topRight: Radius.circular(15.0),
-                  bottomLeft: Radius.circular(15.0),
-                  bottomRight: Radius.circular(15.0),
-                ),
-        ),
+        margin: isMe ? _kMeMargin : _kOtherMargin,
+        padding: _kPadding,
+        decoration: isMe ? _kMeDecoration : _kOtherDecoration,
         child: MarkdownBody(data: message, selectable: true),
       ),
     );

lib/routes/networking_rest_api_fetch_ex.dart

@@ -15,9 +15,9 @@ class RestApiFetchExample extends StatefulWidget {
 class _RestApiFetchExampleState extends State<RestApiFetchExample> {
   late TextEditingController _urlController;
   late TextEditingController _apiTokenController;
-  String _responseBody = '<empty>';
-  String _error = '<none>';
-  bool _pending = false;
+  final _responseBody = ValueNotifier<String>('<empty>');
+  final _error = ValueNotifier<String>('<none>');
+  final _pending = ValueNotifier<bool>(false);
 
   @override
   void initState() {
@@ -27,6 +27,16 @@ class _RestApiFetchExampleState extends State<RestApiFetchExample> {
       ..text = 'https://jsonplaceholder.typicode.com/posts/1';
   }
 
+  @override
+  void dispose() {
+    _urlController.dispose();
+    _apiTokenController.dispose();
+    _responseBody.dispose();
+    _error.dispose();
+    _pending.dispose();
+    super.dispose();
+  }
+
   @override
   Widget build(BuildContext context) {
     return ListView(
@@ -49,41 +59,49 @@ class _RestApiFetchExampleState extends State<RestApiFetchExample> {
         ),
         OverflowBar(
           children: <Widget>[
-            ElevatedButton(
-              onPressed: _pending
-                  ? null
-                  : () => this._httpGet(
-                      _urlController.text,
-                      _apiTokenController.text,
-                    ),
-              child: const Text('Get'),
+            ValueListenableBuilder<bool>(
+              valueListenable: _pending,
+              builder: (context, pending, _) => ElevatedButton(
+                onPressed: pending
+                    ? null
+                    : () => this._httpGet(
+                        _urlController.text,
+                        _apiTokenController.text,
+                      ),
+                child: const Text('Get'),
+              ),
             ),
             ElevatedButton(onPressed: this._reset, child: const Text('Reset')),
           ],
         ),
-        Text('Response body=$_responseBody'),
+        ValueListenableBuilder<String>(
+          valueListenable: _responseBody,
+          builder: (context, responseBody, _) => Text(
+            'Response body=$responseBody',
+          ),
+        ),
         const Divider(),
-        Text('Error=$_error'),
+        ValueListenableBuilder<String>(
+          valueListenable: _error,
+          builder: (context, error, _) => Text('Error=$error'),
+        ),
       ],
     );
   }
 
   void _reset({bool resetControllers = true}) {
-    setState(() {
-      if (resetControllers) {
-        this._urlController.text =
-            'https://jsonplaceholder.typicode.com/posts/1';
-      }
-      this._responseBody = '<empty>';
-      this._error = '<none>';
-      this._pending = false;
-    });
+    if (resetControllers) {
+      this._urlController.text = 'https://jsonplaceholder.typicode.com/posts/1';
+    }
+    _responseBody.value = '<empty>';
+    _error.value = '<none>';
+    _pending.value = false;
   }
 
   // Using the http package we can easily GET data from REST APIs.
   Future<void> _httpGet(String url, String apiToken) async {
     _reset();
-    setState(() => this._pending = true);
+    _pending.value = true;
     try {
       final http.Response response = await http.get(
         Uri.parse(url),
@@ -95,10 +113,10 @@ class _RestApiFetchExampleState extends State<RestApiFetchExample> {
       // heavy json parsing work in a background isolate.
       final parsed = await compute(jsonDecode, response.body);
       print('parsed json object=$parsed');
-      setState(() => this._responseBody = response.body);
+      _responseBody.value = response.body;
     } catch (e) {
-      setState(() => this._error = e.toString());
+      _error.value = e.toString();
     }
-    setState(() => this._pending = false);
+    _pending.value = false;
   }
 }

lib/themes.dart

@@ -1,4 +1,5 @@
 import 'package:flutter/material.dart';
+import 'package:flutter/cupertino.dart';
 
 // This file is adapted from
 // https://github.com/flutter/flutter/blob/master/examples/flutter_gallery/lib/gallery/themes.dart

pubspec.lock

@@ -1648,10 +1648,10 @@ packages:
     dependency: transitive
     description:
       name: matcher
-      sha256: "12956d0ad8390bbcc63ca2e1469c0619946ccb52809807067a7020d57e647aa6"
+      sha256: dc0b7dc7651697ea4ff3e69ef44b0407ea32c487a39fff6a4004fa585e901861
       url: "https://pub.dev"
     source: hosted
-    version: "0.12.18"
+    version: "0.12.19"
   material_color_utilities:
     dependency: transitive
     description:
@@ -2221,10 +2221,10 @@ packages:
     dependency: transitive
     description:
       name: test_api
-      sha256: "93167629bfc610f71560ab9312acdda4959de4df6fac7492c89ff0d3886f6636"
+      sha256: "8161c84903fd860b26bfdefb7963b3f0b68fee7adea0f59ef805ecca346f0c7a"
       url: "https://pub.dev"
     source: hosted
-    version: "0.7.9"
+    version: "0.7.10"
   timelines_plus:
     dependency: "direct main"
     description: