diff --git a/lib/assets/blank_avatar.svg b/lib/assets/blank_avatar.svg new file mode 100644 index 0000000..df91dab --- /dev/null +++ b/lib/assets/blank_avatar.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/lib/main.dart b/lib/main.dart index e7f4dda..cb1a795 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -5,12 +5,15 @@ import 'package:Kide/pages/OnBoarding/OnBoarding.dart'; import 'package:dynamic_theme/dynamic_theme.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; +import 'package:flutter_svg/flutter_svg.dart'; +import 'package:flutter_svg/svg.dart'; void main() { WidgetsFlutterBinding.ensureInitialized(); SystemChrome.setPreferredOrientations( [DeviceOrientation.portraitUp, DeviceOrientation.portraitDown]); + precachePicture(ExactAssetPicture(SvgPicture.svgStringDecoder, './lib/assets/blank_avatar.svg'), null); runApp( new DynamicTheme( defaultBrightness: Brightness.light, diff --git a/lib/pages/AvatarPage/AvatarLoading.dart b/lib/pages/AvatarPage/AvatarLoading.dart new file mode 100644 index 0000000..ac080c7 --- /dev/null +++ b/lib/pages/AvatarPage/AvatarLoading.dart @@ -0,0 +1,37 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_svg/flutter_svg.dart'; + +class AvatarLoading extends StatelessWidget { + final double width; + final double height; + + const AvatarLoading(this.width, this.height, {Key key}) : super(key: key); + + @override + Widget build(BuildContext context) { + final loadingIndicatorTopOffset = height * 0.3; + final loadingIndicatorLeftOffset = width * 0.32; + final loadingIndicatorHeight = height * 0.67; + final loadingIndicatorWidth = width * 1.15; + + return Stack( + children: [ + Positioned( + top: loadingIndicatorTopOffset, + left: loadingIndicatorLeftOffset, + child: SizedBox( + height: loadingIndicatorHeight, + width: loadingIndicatorWidth, + child: CircularProgressIndicator(), + ), + ), + SvgPicture.asset( + './lib/assets/blank_avatar.svg', + height: height, + width: width, + alignment: Alignment.topLeft, + ), + ], + ); + } +} diff --git a/lib/pages/HomePage/Home.dart b/lib/pages/HomePage/Home.dart index f9a11df..645695f 100644 --- a/lib/pages/HomePage/Home.dart +++ b/lib/pages/HomePage/Home.dart @@ -1,4 +1,5 @@ import 'package:Kide/pages/AboutUsPage.dart/AboutUs.dart'; +import 'package:Kide/pages/AvatarPage/AvatarLoading.dart'; import 'package:Kide/pages/HomePage/widgets/PostsPage.dart'; import 'package:Kide/pages/Profile/profile.dart'; import 'package:Kide/pages/SettingsPage/settings.dart'; @@ -81,6 +82,9 @@ class _HomePageState extends State @override // ignore: must_call_super Widget build(BuildContext context) { + final avatarWidth = (360 / MediaQuery.of(context).size.height) * 100; + final avatarHeight = (640 / MediaQuery.of(context).size.height) * 100; + if (ct == 0) { // Checking for darkTheme enabled isDarkModeEnabled = @@ -110,9 +114,13 @@ class _HomePageState extends State child: isAv ? SvgPicture.network( url, - height: (640 / MediaQuery.of(context).size.height) * 100, - width: (360 / MediaQuery.of(context).size.height) * 100, + height: avatarHeight, + width: avatarWidth, alignment: Alignment.topLeft, + placeholderBuilder: (_) => AvatarLoading( + avatarWidth, + avatarHeight, + ), ) : InitialNameAvatar( name,