BBreaking change

lib/view/page/home.dart

@@ -9,11 +9,14 @@ import 'package:toolbox/data/res/build_data.dart';
 import 'package:toolbox/locator.dart';
 import 'package:toolbox/view/page/convert.dart';
 import 'package:toolbox/view/page/debug.dart';
-import 'package:toolbox/view/page/server/server_tab.dart';
+import 'package:toolbox/view/page/private_key/stored.dart';
+import 'package:toolbox/view/page/server/tab.dart';
+import 'package:toolbox/view/page/setting.dart';
+import 'package:toolbox/view/widget/url_text.dart';
 
 class MyHomePage extends StatefulWidget {
-  const MyHomePage({Key? key, required this.title}) : super(key: key);
-  final String title;
+  const MyHomePage({Key? key, required this.primaryColor}) : super(key: key);
+  final Color primaryColor;
 
   @override
   State<MyHomePage> createState() => _MyHomePageState();
@@ -42,9 +45,10 @@ class _MyHomePageState extends State<MyHomePage>
         title: GestureDetector(
           onLongPress: () =>
               AppRoute(const DebugPage(), 'Debug Page').go(context),
-          child: Text(widget.title),
+          child: const Text('ToolBox'),
         ),
         bottom: TabBar(
+          indicatorColor: widget.primaryColor,
           tabs: _tabs.map((e) => Tab(text: e)).toList(),
           controller: _tabController,
         ),
@@ -67,19 +71,27 @@ class _MyHomePageState extends State<MyHomePage>
             accountEmail: Text(_buildVersionStr()),
             currentAccountPicture: _buildIcon(),
           ),
-          // const ListTile(
-          //   leading: Icon(Icons.settings),
-          //   title: Text('设置'),
-          // ),
+          ListTile(
+            leading: const Icon(Icons.settings),
+            title: const Text('Setting'),
+            onTap: () => AppRoute(const SettingPage(), 'Setting').go(context),
+          ),
+          ListTile(
+            leading: const Icon(Icons.vpn_key),
+            title: const Text('Private Key'),
+            onTap: () =>
+                AppRoute(const StoredPrivateKeysPage(), 'Setting').go(context),
+          ),
           AboutListTile(
             icon: const Icon(Icons.text_snippet),
-            child: const Text('Open source licenses'),
+            child: const Text('Licences'),
             applicationName: BuildData.name,
             applicationVersion: _buildVersionStr(),
             applicationIcon: _buildIcon(),
             aboutBoxChildren: const [
-              Text('''\nMade with Love.
-            \nAll rights reserved.'''),
+              UrlText(
+                  text: '''\nMade with ❤️ by https://github.com/LollipopKit .
+            \nAll rights reserved.''', replace: 'LollipopKit'),
             ],
           ),
         ],

lib/view/page/private_key/edit.dart

@@ -0,0 +1,98 @@
+import 'package:after_layout/after_layout.dart';
+import 'package:flutter/material.dart';
+import 'package:toolbox/data/model/private_key_info.dart';
+import 'package:toolbox/data/provider/private_key.dart';
+import 'package:toolbox/locator.dart';
+
+class PrivateKeyEditPage extends StatefulWidget {
+  const PrivateKeyEditPage({Key? key, this.info}) : super(key: key);
+
+  final PrivateKeyInfo? info;
+
+  @override
+  _PrivateKeyEditPageState createState() => _PrivateKeyEditPageState();
+}
+
+class _PrivateKeyEditPageState extends State<PrivateKeyEditPage>
+    with AfterLayoutMixin {
+  final nameController = TextEditingController();
+  final keyController = TextEditingController();
+  final pwdController = TextEditingController();
+
+  late PrivateKeyProvider _provider;
+
+  @override
+  void initState() {
+    super.initState();
+    _provider = locator<PrivateKeyProvider>();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(title: const Text('Edit'), actions: [
+        widget.info != null
+            ? IconButton(
+                onPressed: () {
+                  _provider.delInfo(widget.info!);
+                  Navigator.of(context).pop();
+                },
+                icon: const Icon(Icons.delete))
+            : const SizedBox()
+      ]),
+      body: ListView(
+        padding: const EdgeInsets.all(13),
+        children: [
+          TextField(
+            controller: nameController,
+            keyboardType: TextInputType.text,
+            decoration: _buildDecoration('Name', icon: Icons.info),
+          ),
+          TextField(
+            controller: keyController,
+            autocorrect: false,
+            minLines: 3,
+            maxLines: 10,
+            keyboardType: TextInputType.text,
+            decoration: _buildDecoration('Private Key', icon: Icons.vpn_key),
+          ),
+          TextField(
+            controller: pwdController,
+            autocorrect: false,
+            keyboardType: TextInputType.text,
+            obscureText: true,
+            decoration: _buildDecoration('Password', icon: Icons.password),
+          ),
+        ],
+      ),
+      floatingActionButton: FloatingActionButton(
+        child: const Icon(Icons.send),
+        onPressed: () {
+          final info = PrivateKeyInfo(
+              nameController.text, keyController.text, pwdController.text);
+          if (widget.info != null) {
+            _provider.updateInfo(widget.info!, info);
+          } else {
+            _provider.addInfo(info);
+          }
+          Navigator.of(context).pop();
+        },
+      ),
+    );
+  }
+
+  InputDecoration _buildDecoration(String label,
+      {TextStyle? textStyle, IconData? icon}) {
+    return InputDecoration(
+        labelText: label, labelStyle: textStyle, icon: Icon(icon));
+  }
+
+  @override
+  void afterFirstLayout(BuildContext context) {
+    if (widget.info != null) {
+      nameController.text = widget.info!.id;
+      keyController.text = widget.info!.privateKey;
+      pwdController.text = widget.info!.password;
+    }
+  }
+}

lib/view/page/private_key/stored.dart

@@ -0,0 +1,58 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:toolbox/core/route.dart';
+import 'package:toolbox/data/provider/private_key.dart';
+import 'package:toolbox/view/page/private_key/edit.dart';
+import 'package:toolbox/view/widget/round_rect_card.dart';
+
+class StoredPrivateKeysPage extends StatefulWidget {
+  const StoredPrivateKeysPage({Key? key}) : super(key: key);
+
+  @override
+  _PrivateKeyListState createState() => _PrivateKeyListState();
+}
+
+class _PrivateKeyListState extends State<StoredPrivateKeysPage> {
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Private Keys'),
+      ),
+      body: Consumer<PrivateKeyProvider>(
+        builder: (_, key, __) {
+          return key.infos.isNotEmpty
+              ? ListView.builder(
+                  padding: const EdgeInsets.all(13),
+                  itemCount: key.infos.length,
+                  itemExtent: 57,
+                  itemBuilder: (context, idx) {
+                    return RoundRectCard(Row(
+                      crossAxisAlignment: CrossAxisAlignment.center,
+                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
+                      children: [
+                        Text(
+                          key.infos[idx].id,
+                          textAlign: TextAlign.center,
+                        ),
+                        TextButton(
+                            onPressed: () => AppRoute(
+                                    PrivateKeyEditPage(info: key.infos[idx]),
+                                    'private key edit page')
+                                .go(context),
+                            child: const Text('Edit'))
+                      ],
+                    ));
+                  })
+              : const Center(child: Text('No saved private keys.'));
+        },
+      ),
+      floatingActionButton: FloatingActionButton(
+        child: const Icon(Icons.add),
+        onPressed: () =>
+            AppRoute(const PrivateKeyEditPage(), 'private key edit page')
+                .go(context),
+      ),
+    );
+  }
+}

lib/view/page/server/edit.dart

@@ -1,8 +1,13 @@
 import 'package:after_layout/after_layout.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:toolbox/core/route.dart';
+import 'package:toolbox/core/utils.dart';
 import 'package:toolbox/data/model/server_private_info.dart';
+import 'package:toolbox/data/provider/private_key.dart';
 import 'package:toolbox/data/provider/server.dart';
 import 'package:toolbox/locator.dart';
+import 'package:toolbox/view/page/private_key/edit.dart';
 
 class ServerEditPage extends StatefulWidget {
   const ServerEditPage({Key? key, this.spi}) : super(key: key);
@@ -25,6 +30,9 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
 
   bool usePublicKey = false;
 
+  int _typeOptionIndex = -1;
+  final List<String> _keyInfo = ['', ''];
+
   @override
   void initState() {
     super.initState();
@@ -34,7 +42,16 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(title: const Text('Edit')),
+      appBar: AppBar(title: const Text('Edit'), actions: [
+        widget.spi != null
+            ? IconButton(
+                onPressed: () {
+                  _serverProvider.delServer(widget.spi!);
+                  Navigator.of(context).pop();
+                },
+                icon: const Icon(Icons.delete))
+            : const SizedBox()
+      ]),
       body: SingleChildScrollView(
         padding: const EdgeInsets.all(17),
         child: Column(
@@ -49,6 +66,7 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
             TextField(
               controller: ipController,
               keyboardType: TextInputType.text,
+              autocorrect: false,
               decoration: _buildDecoration('Host', icon: Icons.storage),
             ),
             TextField(
@@ -60,6 +78,7 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
             TextField(
               controller: usernameController,
               keyboardType: TextInputType.text,
+              autocorrect: false,
               decoration: _buildDecoration('User', icon: Icons.account_box),
             ),
             const SizedBox(height: 7),
@@ -71,37 +90,59 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
                     onChanged: (val) => setState(() => usePublicKey = val)),
               ],
             ),
-            usePublicKey
+            !usePublicKey
                 ? TextField(
-                    controller: keyController,
+                    controller: passwordController,
+                    obscureText: true,
                     keyboardType: TextInputType.text,
-                    autocorrect: false,
-                    maxLines: 10,
-                    minLines: 5,
-                    decoration:
-                        _buildDecoration('Private Key', icon: Icons.vpn_key),
+                    decoration: _buildDecoration('Pwd', icon: Icons.password),
                     onSubmitted: (_) => {},
                   )
                 : const SizedBox(),
-            TextField(
-              controller: passwordController,
-              obscureText: true,
-              keyboardType: TextInputType.text,
-              decoration: _buildDecoration('Pwd', icon: Icons.password),
-              onSubmitted: (_) => {},
-            ),
+            usePublicKey
+                ? Consumer<PrivateKeyProvider>(builder: (_, key, __) {
+                    final tiles = key.infos
+                        .map(
+                          (e) => ListTile(
+                              contentPadding: EdgeInsets.zero,
+                              title: Text(e.id, textAlign: TextAlign.start),
+                              trailing: _buildRadio(key.infos.indexOf(e),
+                                  e.privateKey, e.password)),
+                        )
+                        .toList();
+                    tiles.add(ListTile(
+                      title: const Text('Add a Private Key'),
+                      contentPadding: EdgeInsets.zero,
+                      trailing: IconButton(
+                        icon: const Icon(Icons.add),
+                        onPressed: () => AppRoute(const PrivateKeyEditPage(),
+                                'private key edit page')
+                            .go(context),
+                      ),
+                    ));
+                    return ExpansionTile(
+                      tilePadding: EdgeInsets.zero,
+                      childrenPadding: EdgeInsets.zero,
+                      title: const Text(
+                        'Choose Key',
+                        style: TextStyle(fontSize: 14),
+                      ),
+                      children: tiles,
+                    );
+                  })
+                : const SizedBox()
           ],
         ),
       ),
       floatingActionButton: FloatingActionButton(
         child: const Icon(Icons.send),
         onPressed: () {
-          final authorization = keyController.text.isEmpty
-              ? passwordController.text
-              : {
-                  "privateKey": keyController.text,
-                  "passphrase": passwordController.text
-                };
+          if (usePublicKey && _typeOptionIndex == -1) {
+            showSnackBar(context, const Text('Please select a private key.'));
+          }
+          final authorization = usePublicKey
+              ? {"privateKey": _keyInfo[0], "passphrase": _keyInfo[1]}
+              : passwordController.text;
           final spi = ServerPrivateInfo(
               name: nameController.text,
               ip: ipController.text,
@@ -121,6 +162,20 @@ class _ServerEditPageState extends State<ServerEditPage> with AfterLayoutMixin {
     );
   }
 
+  Radio _buildRadio(int index, String key, String pwd) {
+    return Radio<int>(
+      value: index,
+      groupValue: _typeOptionIndex,
+      onChanged: (int? value) {
+        setState(() {
+          _typeOptionIndex = value!;
+          _keyInfo[0] = key;
+          _keyInfo[1] = pwd;
+        });
+      },
+    );
+  }
+
   InputDecoration _buildDecoration(String label,
       {TextStyle? textStyle, IconData? icon}) {
     return InputDecoration(

lib/view/page/server/tab.dart

@@ -1,5 +1,5 @@
 import 'package:after_layout/after_layout.dart';
-import 'package:charts_flutter/flutter.dart' as chart;
+import 'package:circle_chart/circle_chart.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter/widgets.dart';
 import 'package:flutter_staggered_animations/flutter_staggered_animations.dart';
@@ -9,9 +9,9 @@ import 'package:toolbox/core/route.dart';
 import 'package:toolbox/data/model/server_private_info.dart';
 import 'package:toolbox/data/model/server_status.dart';
 import 'package:toolbox/data/provider/server.dart';
+import 'package:toolbox/data/store/setting.dart';
 import 'package:toolbox/locator.dart';
-import 'package:toolbox/view/page/server/server_edit.dart';
-import 'package:toolbox/view/widget/circle_pie.dart';
+import 'package:toolbox/view/page/server/edit.dart';
 
 class ServerPage extends StatefulWidget {
   const ServerPage({Key? key}) : super(key: key);
@@ -24,6 +24,7 @@ class _ServerPageState extends State<ServerPage>
     with AutomaticKeepAliveClientMixin, AfterLayoutMixin {
   late MediaQueryData _media;
   late ThemeData _theme;
+  late Color _primaryColor;
 
   late ServerProvider _serverProvider;
 
@@ -38,6 +39,7 @@ class _ServerPageState extends State<ServerPage>
     super.didChangeDependencies();
     _media = MediaQuery.of(context);
     _theme = Theme.of(context);
+    _primaryColor = Color(locator<SettingStore>().primaryColor.fetch()!);
   }
 
   @override
@@ -102,19 +104,6 @@ class _ServerPageState extends State<ServerPage>
   }
 
   Widget _buildRealServerCard(ServerStatus ss, String serverName) {
-    final cpuData = [
-      IndexPercent(0, ss.cpuPercent!.toInt()),
-      IndexPercent(1, 100 - ss.cpuPercent!.toInt()),
-    ];
-    final memData = <IndexPercent>[];
-    for (var e in ss.memList!) {
-      memData.add(IndexPercent(ss.memList!.indexOf(e), e!.toInt()));
-    }
-
-    final mem1 = memData[1];
-    memData[1] = memData.last;
-    memData.last = mem1;
-
     final rootDisk =
         ss.disk!.firstWhere((element) => element!.mountLocation == '/');
 
@@ -139,23 +128,9 @@ class _ServerPageState extends State<ServerPage>
         Row(
           mainAxisAlignment: MainAxisAlignment.spaceBetween,
           children: [
-            _buildPercentCircle(ss.cpuPercent!, 'CPU', [
-              chart.Series<IndexPercent, int>(
-                id: 'CPU',
-                domainFn: (IndexPercent cpu, _) => cpu.id,
-                measureFn: (IndexPercent cpu, _) => cpu.percent,
-                data: cpuData,
-              )
-            ]),
+            _buildPercentCircle(ss.cpuPercent! + 0.01, 'CPU'),
             _buildPercentCircle(
-                ss.memList![1]! / ss.memList![0]! * 100, 'Mem', [
-              chart.Series<IndexPercent, int>(
-                id: 'Mem',
-                domainFn: (IndexPercent mem, _) => mem.id,
-                measureFn: (IndexPercent mem, _) => mem.percent,
-                data: memData,
-              )
-            ]),
+                ss.memList![1]! / ss.memList![0]! * 100 + 0.01, 'Mem'),
             _buildIOData('Net', 'Conn:\n' + ss.tcp!.maxConn!.toString(),
                 'Fail:\n' + ss.tcp!.fail.toString()),
             _buildIOData('Disk', 'Total:\n' + rootDisk!.size!,
@@ -172,59 +147,53 @@ class _ServerPageState extends State<ServerPage>
     return SizedBox(
       width: _media.size.width * 0.2,
       height: _media.size.height * 0.1,
-      child: Stack(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.center,
         children: [
-          Positioned.fill(
-            child: Center(
-              child: Column(
-                mainAxisAlignment: MainAxisAlignment.center,
-                children: [
-                  Text(
-                    up,
-                    style: statusTextStyle,
-                    textAlign: TextAlign.center,
-                  ),
-                  const SizedBox(height: 3),
-                  Text(
-                    down + '\n',
-                    style: statusTextStyle,
-                    textAlign: TextAlign.center,
-                  )
-                ],
-              ),
-            ),
+          Text(
+            up,
+            style: statusTextStyle,
+            textAlign: TextAlign.center,
           ),
-          Positioned(
-              child: Text(title, textAlign: TextAlign.center),
-              bottom: 0,
-              left: 0,
-              right: 0)
+          const SizedBox(height: 3),
+          Text(
+            down + '\n',
+            style: statusTextStyle,
+            textAlign: TextAlign.center,
+          ),
+          Text(title, textAlign: TextAlign.center)
         ],
       ),
     );
   }
 
-  Widget _buildPercentCircle(double percent, String title,
-      List<chart.Series<IndexPercent, int>> series) {
+  Widget _buildPercentCircle(double percent, String title) {
     return SizedBox(
       width: _media.size.width * 0.2,
       height: _media.size.height * 0.1,
-      child: Stack(
+      child: Column(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
         children: [
-          DonutPieChart(series),
-          Positioned.fill(
-            child: Center(
-              child: Text(
-                '${percent.toStringAsFixed(1)}%\n',
-                textAlign: TextAlign.center,
+          Stack(
+            children: [
+              CircleChart(
+                progressColor: _primaryColor,
+                progressNumber: percent,
+                maxNumber: 100,
+                width: _media.size.width * 0.37,
+                height: _media.size.height * 0.09,
               ),
-            ),
+              Positioned.fill(
+                child: Center(
+                  child: Text(
+                    '${percent.toStringAsFixed(1)}%',
+                    textAlign: TextAlign.center,
+                  ),
+                ),
+              ),
+            ],
           ),
-          Positioned(
-              child: Text(title, textAlign: TextAlign.center),
-              bottom: 0,
-              left: 0,
-              right: 0)
+          Text(title, textAlign: TextAlign.center),
         ],
       ),
     );

lib/view/page/setting.dart

@@ -0,0 +1,108 @@
+import 'package:flutter/material.dart';
+import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';
+import 'package:toolbox/core/utils.dart';
+import 'package:toolbox/data/store/setting.dart';
+import 'package:toolbox/locator.dart';
+import 'package:toolbox/view/widget/round_rect_card.dart';
+
+class SettingPage extends StatefulWidget {
+  const SettingPage({Key? key}) : super(key: key);
+
+  @override
+  _SettingPageState createState() => _SettingPageState();
+}
+
+class _SettingPageState extends State<SettingPage> {
+  late SettingStore _store;
+  late int _selectedColorValue;
+  final TextEditingController _intervalController = TextEditingController();
+
+  @override
+  void initState() {
+    super.initState();
+    _store = locator<SettingStore>();
+    _intervalController.text =
+        _store.serverStatusUpdateInterval.fetch()!.toString();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Setting'),
+      ),
+      body: ListView(
+        padding: const EdgeInsets.all(17),
+        children: [
+          RoundRectCard(_buildAppColorPreview()),
+          RoundRectCard(
+            ListTile(
+              contentPadding: EdgeInsets.zero,
+              title: const Text(
+                'Server status update interval (seconds)',
+                style: TextStyle(fontSize: 14),
+                textAlign: TextAlign.start,
+              ),
+              trailing: SizedBox(
+                width: MediaQuery.of(context).size.width * 0.1,
+                child: TextField(
+                  textAlign: TextAlign.center,
+                  controller: _intervalController,
+                  keyboardType: TextInputType.number,
+                  onSubmitted: (val) {
+                    _store.serverStatusUpdateInterval.put(int.parse(val));
+                    showSnackBar(
+                        context,
+                        const Text(
+                            'This setting will take effect \nthe next time app launch'));
+                  },
+                ),
+              ),
+            ),
+          )
+        ],
+      ),
+    );
+  }
+
+  Widget _buildAppColorPreview() {
+    final nowAppColor = _store.primaryColor.fetch()!;
+    return ExpansionTile(
+        tilePadding: EdgeInsets.zero,
+        childrenPadding: EdgeInsets.zero,
+        children: [
+          _buildAppColorPicker(Color(nowAppColor)),
+          _buildColorPickerConfirmBtn()
+        ],
+        trailing: ClipOval(
+          child: Container(
+            color: Color(nowAppColor),
+            height: 27,
+            width: 27,
+          ),
+        ),
+        title: const Text(
+          'App primary color',
+          style: TextStyle(fontSize: 14),
+        ));
+  }
+
+  Widget _buildAppColorPicker(Color selected) {
+    return MaterialColorPicker(
+        shrinkWrap: true,
+        onColorChange: (Color color) {
+          _selectedColorValue = color.value;
+        },
+        selectedColor: selected);
+  }
+
+  Widget _buildColorPickerConfirmBtn() {
+    return IconButton(
+      icon: const Icon(Icons.save),
+      onPressed: (() {
+        _store.primaryColor.put(_selectedColorValue);
+        setState(() {});
+      }),
+    );
+  }
+}

lib/view/widget/circle_pie.dart

@@ -1,32 +0,0 @@
-import 'package:charts_flutter/flutter.dart' as charts;
-import 'package:flutter/material.dart';
-
-class DonutPieChart extends StatelessWidget {
-  final List<charts.Series<dynamic, num>> seriesList;
-  final bool animate;
-
-  const DonutPieChart(this.seriesList, {Key? key, this.animate = false})
-      : super(key: key);
-
-  @override
-  Widget build(BuildContext context) {
-    return charts.PieChart(seriesList,
-        animate: animate,
-        layoutConfig: charts.LayoutConfig(
-            leftMarginSpec: charts.MarginSpec.fixedPixel(1),
-            topMarginSpec: charts.MarginSpec.fixedPixel(1),
-            rightMarginSpec: charts.MarginSpec.fixedPixel(1),
-            bottomMarginSpec: charts.MarginSpec.fixedPixel(17)),
-        defaultRenderer: charts.ArcRendererConfig<num>(
-          arcWidth: 6,
-          arcRatio: 0.2,
-        ));
-  }
-}
-
-class IndexPercent {
-  final int id;
-  final int percent;
-
-  IndexPercent(this.id, this.percent);
-}

lib/view/widget/round_rect_card.dart

@@ -0,0 +1,20 @@
+import 'package:flutter/material.dart';
+
+class RoundRectCard extends StatelessWidget {
+  const RoundRectCard(this.child, {Key? key}) : super(key: key);
+
+  final Widget child;
+
+  @override
+  Widget build(BuildContext context) {
+    return Card(
+      child: Padding(
+        padding: const EdgeInsets.symmetric(horizontal: 17),
+        child: child,
+      ),
+      margin: const EdgeInsets.symmetric(vertical: 7),
+      shape: const RoundedRectangleBorder(
+          borderRadius: BorderRadius.all(Radius.circular(17))),
+    );
+  }
+}

lib/view/widget/url_text.dart

@@ -0,0 +1,91 @@
+import 'package:flutter/gestures.dart';
+import 'package:flutter/material.dart';
+import 'package:toolbox/core/utils.dart';
+
+const regUrl =
+    r"(https?|ftp|file)://[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]*";
+
+class UrlText extends StatelessWidget {
+  final String text;
+  final String? replace;
+  final TextStyle style;
+
+  const UrlText(
+      {Key? key,
+      required this.text,
+      this.replace,
+      this.style = const TextStyle()})
+      : super(key: key);
+
+  List<InlineSpan> _getTextSpans(bool isDarkMode) {
+    List<InlineSpan> widgets = <InlineSpan>[];
+    final reg = RegExp(regUrl);
+    Iterable<Match> _matches = reg.allMatches(text);
+    List<_ResultMatch> resultMatches = <_ResultMatch>[];
+    int start = 0;
+
+    for (Match match in _matches) {
+      final group0 = match.group(0);
+      if (group0 != null && group0.isNotEmpty) {
+        if (start != match.start) {
+          _ResultMatch result1 = _ResultMatch();
+          result1.isUrl = false;
+          result1.text = text.substring(start, match.start);
+          resultMatches.add(result1);
+        }
+
+        _ResultMatch result2 = _ResultMatch();
+        result2.isUrl = true;
+        result2.text = match.group(0)!;
+        resultMatches.add(result2);
+        start = match.end;
+      }
+    }
+
+    if (start < text.length) {
+      _ResultMatch result1 = _ResultMatch();
+      result1.isUrl = false;
+      result1.text = text.substring(start);
+      resultMatches.add(result1);
+    }
+
+    for (var result in resultMatches) {
+      if (result.isUrl) {
+        widgets.add(_LinkTextSpan(
+            replace: replace ?? result.text,
+            text: result.text,
+            style: style.copyWith(color: Colors.blue)));
+      } else {
+        widgets.add(TextSpan(
+            text: result.text,
+            style: style.copyWith(
+              color: isDarkMode ? Colors.white : Colors.black,
+            )));
+      }
+    }
+    return widgets;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return RichText(
+      text: TextSpan(children: _getTextSpans(isDarkMode(context))),
+    );
+  }
+}
+
+class _LinkTextSpan extends TextSpan {
+  _LinkTextSpan({TextStyle? style, required String text, String? replace})
+      : super(
+            style: style,
+            text: replace,
+            recognizer: TapGestureRecognizer()
+              ..onTap = () {
+                openUrl(text);
+              });
+}
+
+class _ResultMatch {
+  late bool isUrl;
+  late String text;
+}