Redesign. Improve dashboard page loading.

lib/widgets/tb_app_bar.dart

@@ -3,12 +3,12 @@ import 'dart:async';
 import 'package:stream_transform/stream_transform.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
-import 'package:thingsboard_app/config/themes/tb_theme.dart';
 import 'package:thingsboard_app/core/context/tb_context.dart';
 import 'package:thingsboard_app/core/context/tb_context_widget.dart';
 
 class TbAppBar extends TbContextWidget<TbAppBar, _TbAppBarState> implements PreferredSizeWidget {
 
+  final Widget? leading;
   final Widget? title;
   final List<Widget>? actions;
   final double? elevation;
@@ -17,7 +17,7 @@ class TbAppBar extends TbContextWidget<TbAppBar, _TbAppBarState> implements Pref
   @override
   final Size preferredSize;
 
-  TbAppBar(TbContext tbContext, {this.title, this.actions, this.elevation,
+  TbAppBar(TbContext tbContext, {this.leading, this.title, this.actions, this.elevation = 8,
                                  this.showLoadingIndicator = false}) :
     preferredSize = Size.fromHeight(kToolbarHeight + (showLoadingIndicator ? 4 : 0)),
     super(tbContext);
@@ -64,9 +64,11 @@ class _TbAppBarState extends TbContextState<TbAppBar, _TbAppBarState> {
 
   AppBar buildDefaultBar() {
     return AppBar(
+      leading: widget.leading,
       title: widget.title,
       actions: widget.actions,
       elevation: widget.elevation,
+      shadowColor: Color(0xFFFFFFFF).withAlpha(150),
     );
   }
 }
@@ -137,16 +139,17 @@ class _TbAppSearchBarState extends TbContextState<TbAppSearchBar, _TbAppSearchBa
   AppBar buildSearchBar() {
     return AppBar(
       centerTitle: true,
-      title: Theme(
-          data: tbDarkTheme,
-          child: TextField(
-            controller: _filter,
-            cursorColor: Colors.white,
-            decoration: new InputDecoration(
-              border: InputBorder.none,
-              contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 15, right: 15),
-              hintText: widget.searchHint ?? 'Search',
+      title: TextField(
+          controller: _filter,
+          autofocus: true,
+          // cursorColor: Colors.white,
+          decoration: new InputDecoration(
+            border: InputBorder.none,
+            hintStyle: TextStyle(
+              color: Color(0xFF282828).withAlpha((255 * 0.38).ceil()),
             ),
+            contentPadding: EdgeInsets.only(left: 15, bottom: 11, top: 15, right: 15),
+            hintText: widget.searchHint ?? 'Search',
           )
       ),
       actions: [

lib/widgets/tb_progress_indicator.dart

@@ -0,0 +1,86 @@
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
+import 'package:flutter_svg/flutter_svg.dart';
+import 'package:thingsboard_app/constants/assets_path.dart';
+
+class TbProgressIndicator extends ProgressIndicator {
+
+  final double size;
+
+  const TbProgressIndicator({
+    Key? key,
+    this.size = 36.0,
+    Animation<Color?>? valueColor,
+    String? semanticsLabel,
+    String? semanticsValue,
+  }) : super(
+        key: key,
+        value: null,
+        valueColor: valueColor,
+        semanticsLabel: semanticsLabel,
+        semanticsValue: semanticsValue,
+      );
+
+  @override
+  _TbProgressIndicatorState createState() => _TbProgressIndicatorState();
+
+  Color _getValueColor(BuildContext context) => valueColor?.value ?? Theme.of(context).primaryColor;
+
+}
+
+class _TbProgressIndicatorState extends State<TbProgressIndicator> with SingleTickerProviderStateMixin {
+
+  late AnimationController _controller;
+  late CurvedAnimation _rotation;
+
+  @override
+  void initState() {
+    super.initState();
+    _controller = AnimationController(
+      duration: const Duration(milliseconds: 1500),
+      vsync: this, upperBound: 1, animationBehavior: AnimationBehavior.preserve);
+    _rotation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
+    _controller.repeat();
+  }
+
+  @override
+  void didUpdateWidget(TbProgressIndicator oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    if (!_controller.isAnimating)
+      _controller.repeat();
+  }
+
+  @override
+  void dispose() {
+    _controller.dispose();
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+      children: [
+        SvgPicture.asset(ThingsboardImage.thingsboardCenter,
+            height: widget.size,
+            width: widget.size,
+            color: widget._getValueColor(context)),
+        AnimatedBuilder(
+          animation: _rotation,
+          child: SvgPicture.asset(ThingsboardImage.thingsboardOuter,
+              height: widget.size,
+              width: widget.size,
+              color: widget._getValueColor(context)),
+          builder: (BuildContext context, Widget? child) {
+            return Transform.rotate(
+                angle: _rotation.value * pi * 2,
+                child: child
+            );
+          },
+        )
+      ],
+    );
+  }
+
+}

lib/widgets/transition_indexed_stack.dart

@@ -0,0 +1,134 @@
+import 'package:flutter/widgets.dart';
+
+class TransitionIndexedStackController {
+
+  _TransitionIndexedStackState? _state;
+
+  setTransitionIndexedStackState(_TransitionIndexedStackState state) {
+    _state = state;
+  }
+
+  Future<bool> open(int index, {bool animate = true}) async {
+    if (_state != null) {
+      return _state!._open(index, animate: animate);
+    }
+    return false;
+  }
+
+  Future<bool> close(int index, {bool animate = true}) async {
+    if (_state != null) {
+      return _state!._close(index, animate: animate);
+    }
+    return false;
+  }
+
+  int? get index => _state?._selectedIndex;
+
+}
+
+class TransitionIndexedStack extends StatefulWidget {
+  final Widget first;
+  final Widget second;
+  final Duration duration;
+  final TransitionIndexedStackController? controller;
+
+  const TransitionIndexedStack({
+    Key? key,
+    required this.first,
+    required this.second,
+    this.controller,
+    this.duration = const Duration(milliseconds: 250)
+  }) : super(key: key);
+
+  @override
+  _TransitionIndexedStackState createState() => _TransitionIndexedStackState();
+
+}
+
+class _TransitionIndexedStackState extends State<TransitionIndexedStack> with TickerProviderStateMixin {
+
+  late List<Widget> _pages;
+  List<AnimationController> _animationControllers = [];
+  int _selectedIndex = 0;
+
+  @override
+  void initState() {
+    widget.controller?.setTransitionIndexedStackState(this);
+    final _duration = widget.duration;
+    _animationControllers = [
+      AnimationController(
+        vsync: this,
+        duration: _duration,
+      ),
+      AnimationController(
+        vsync: this,
+        duration: _duration,
+      )
+    ];
+    _pages = [
+      pageBuilder(UniqueKey(), widget.second, context, _animationControllers[1]),
+      pageBuilder(UniqueKey(), widget.first, context, _animationControllers[0]),
+    ];
+    super.initState();
+  }
+
+  Future<bool> _open(int index, {bool animate = true}) async {
+    if (_selectedIndex != index) {
+      _selectedIndex = index;
+      setState(() {
+        _pages = _pages.reversed.toList();
+      });
+      if (animate) {
+        await _animationControllers[_selectedIndex].reverse(from: _animationControllers[_selectedIndex].upperBound);
+      }
+      return true;
+    }
+    return false;
+  }
+
+  Future<bool> _close(int index, {bool animate = true}) async {
+    if (_selectedIndex == index) {
+      _selectedIndex = index == 1 ? 0 : 1;
+      if (animate) {
+        await _animationControllers[index].forward(from: _animationControllers[index].lowerBound);
+      }
+      setState(() {
+        _pages = _pages.reversed.toList();
+      });
+      if (animate) {
+        _animationControllers[index].value = _animationControllers[index].lowerBound;
+      }
+      return true;
+    }
+    return false;
+  }
+
+
+
+  @override
+  void dispose() {
+    _animationControllers.forEach((controller) => controller.dispose());
+    super.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return GestureDetector(
+      child: Stack(
+        children: _pages,
+      ),
+    );
+  }
+
+  Widget pageBuilder(Key key, Widget widget, BuildContext context, Animation<double> animation) {
+    return SlideTransition(
+      key: key,
+      position: Tween<Offset>(
+        begin: Offset.zero,
+        end: const Offset(1, 0),
+      ).animate(animation),
+      child: widget
+    );
+  }
+
+}