├── .gitignore ├── .idea └── workspace.xml ├── .metadata ├── README.md ├── assets ├── fonts │ └── IcoMoon.ttf └── images │ ├── full-bloom.png │ ├── mountains.jpeg │ └── mountains.jpg ├── example_1 ├── flutter_login_screens_android.iml ├── lib ├── Examples │ └── buttons.dart ├── buttons │ ├── simple_round_button.dart │ ├── simple_round_icon_button.dart │ └── simple_round_only_icon_button.dart ├── experiments │ └── graph.dart ├── loaders │ ├── color_loader.dart │ ├── color_loader_2.dart │ ├── color_loader_3.dart │ ├── color_loader_4.dart │ ├── color_loader_5.dart │ ├── dot_type.dart │ └── flip_loader.dart ├── login_screen_1.dart ├── login_screen_2.dart ├── login_screen_3.dart ├── login_screen_4.dart ├── login_screen_5.dart ├── login_screen_6.dart ├── main.dart └── misc │ ├── rating.dart │ └── slide_list_view.dart ├── pubspec.lock ├── pubspec.yaml ├── screenshots ├── buttons1.png ├── carbonCode.txt ├── color_loader.gif ├── color_loader_2.gif ├── color_loader_3.gif ├── color_loader_4.gif ├── color_loader_5.gif ├── loaders.gif ├── login_screen_1.png ├── login_screen_2.png ├── login_screen_3.gif ├── login_screen_4.jpeg ├── login_screen_5.jpeg ├── login_screen_6.jpeg ├── rating.gif └── slide_list_view.gif ├── test └── widget_test.dart └── web ├── favicon.png ├── icons ├── Icon-192.png └── Icon-512.png ├── index.html └── manifest.json /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | **/ios/Flutter/.last_build_id 26 | .dart_tool/ 27 | .flutter-plugins 28 | .flutter-plugins-dependencies 29 | .packages 30 | .pub-cache/ 31 | .pub/ 32 | /build/ 33 | 34 | # Web related 35 | lib/generated_plugin_registrant.dart 36 | 37 | # Symbolication related 38 | app.*.symbols 39 | 40 | # Obfuscation related 41 | app.*.map.json 42 | 43 | # Android Studio will place build artifacts here 44 | /android/app/debug 45 | /android/app/profile 46 | /android/app/release 47 | /android/ 48 | /ios/ 49 | -------------------------------------------------------------------------------- /.idea/workspace.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 23 | 24 | 26 | 27 | 32 | 33 | 34 | 39 | 41 | 42 | 43 | 44 | 46 | 47 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 79 | 80 | 86 | 87 | 88 | 95 | 96 | 103 | 104 | 157 | 158 | 205 | 206 | 211 | 212 | 215 | 216 | 224 | 225 | 226 | 227 | 228 | 229 | 230 | 231 | 1531561389514 232 | 236 | 237 | 1532274318766 238 | 243 | 244 | 1532274502966 245 | 250 | 251 | 1532274576533 252 | 257 | 258 | 1533849994514 259 | 264 | 265 | 1533850102253 266 | 271 | 272 | 1534115504798 273 | 278 | 279 | 1534115523966 280 | 285 | 286 | 1534115590265 287 | 292 | 293 | 1534845237544 294 | 299 | 300 | 1534845418806 301 | 306 | 307 | 1534912707712 308 | 313 | 316 | 317 | 326 | 328 | 329 | 330 | 331 | 332 | 333 | 334 | 336 | 337 | 338 | 339 | 340 | 341 | 342 | 343 | 344 | 345 | 346 | 347 | 348 | 349 | 350 | 351 | 352 | 353 | 354 | -------------------------------------------------------------------------------- /.metadata: -------------------------------------------------------------------------------- 1 | # This file tracks properties of this Flutter project. 2 | # Used by Flutter tool to assess capabilities and perform upgrades etc. 3 | # 4 | # This file should be version controlled and should not be manually edited. 5 | 6 | version: 7 | revision: f4abaa0735eba4dfd8f33f73363911d63931fe03 8 | channel: stable 9 | 10 | project_type: app 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flutter Screens 2 | 3 | A collection of Login Screens, Buttons, Loaders and Widgets with attractive UIs, built with Flutter, ready to be used in your applications. 4 | 5 | ###### Last Update: Added SlideListView Widget 6 | 7 | ## Screenshots And Usage 8 | 9 | ## SlideListView 10 | 11 | A widget that can be used to present two different views that can be toggled using a Floating Action Button. The views toggle with a nice cube-rotation animation. 12 | 13 | ![Screenshots on iOS](./screenshots/slide_list_view.gif) 14 | 15 | ## Rating 16 | 17 | ![Screenshots on iOS](./screenshots/rating.gif) 18 | 19 | ## Loaders 20 | 21 | ![Screenshots on iOS](./screenshots/loaders.gif) 22 | 23 | #### ColorLoaders 24 | 25 | | ![Screenshot](./screenshots/color_loader.gif) Color Loader 1 | ![Screenshot](./screenshots/color_loader_2.gif) Color Loader 2 | ![Screenshot](./screenshots/color_loader_3.gif) Color Loader 3 | 26 | |-----------------------------------------------|-----------------------------------------------|-----------------------------------------------| 27 | | ![Screenshot](./screenshots/color_loader_4.gif) Color Loader 4 | ![Screenshot](./screenshots/color_loader_5.gif) Color Loader 5 | | 28 | 29 | #### FlipLoaders 30 | _Example #1_ 31 | ``` 32 | FlipLoader( 33 | loaderBackground: Colors.red, 34 | iconColor: Colors.white, 35 | icon: Icons.email, 36 | animationType: "full_flip"), 37 | ``` 38 | _Example #2_ 39 | ``` 40 | FlipLoader( 41 | loaderBackground: Colors.blueAccent, 42 | iconColor: Colors.orangeAccent, 43 | icon: Icons.subway, 44 | animationType: "half_flip", 45 | rotateIcon: true, 46 | ), 47 | ``` 48 | _Example #3_ 49 | ``` 50 | FlipLoader( 51 | loaderBackground: Colors.green, 52 | iconColor: Colors.white, 53 | icon: Icons.wifi, 54 | animationType: "half_flip", 55 | shape: "circle", 56 | rotateIcon: false, 57 | ), 58 | ``` 59 | ___ 60 | ###### I am working on more loaders. These loaders will also be updated. Thanks to [jakeleveroni](https://github.com/jakeleveroni) for parameterizing the FlipLoader. 61 | ___ 62 | 63 | ## Buttons 64 | 65 | ![Screenshots on iOS](./screenshots/buttons1.png) 66 | 67 | 68 | #### Simple Round Button 69 | 70 | ``` 71 | SimpleRoundButton( 72 | backgroundColor: Colors.redAccent, 73 | buttonText: Text("LOGIN", 74 | style: TextStyle( 75 | color: Colors.white 76 | ), 77 | ), 78 | textColor: Colors.white, 79 | ) 80 | ``` 81 | 82 | #### Simple Round Icon Button 83 | 84 | ``` 85 | SimpleRoundIconButton( 86 | backgroundColor: Colors.orangeAccent, 87 | buttonText: Text("SEND EMAIL", 88 | style: TextStyle( 89 | color: Colors.white 90 | ), 91 | ), 92 | textColor: Colors.white, 93 | icon: Icon(Icons.email), 94 | ) 95 | ``` 96 | 97 | #### Simple Round Icon Only Button 98 | ``` 99 | SimpleRoundOnlyIconButton( 100 | backgroundColor: Colors.blueAccent, 101 | icon: Icon(Icons.phone), 102 | iconAlignment: Alignment.center, 103 | ) 104 | ``` 105 | ___ 106 | ## Login Screens 107 | 108 | ### Login Screen 1 109 | 110 | ![Screenshots on Android and iOS](./screenshots/login_screen_1.png) 111 | 112 | ##### Usage 113 | 114 | ``` 115 | Container( 116 | child: LoginScreen1( 117 | primaryColor: Color(0xFF4aa0d5), 118 | backgroundColor: Colors.white, 119 | backgroundImage: new AssetImage("assets/images/full-bloom.png"), 120 | ), 121 | ) 122 | ``` 123 | 124 | ### Login Screen 2 125 | 126 | ![Screenshots on Android and iOS](./screenshots/login_screen_2.png) 127 | 128 | ##### Usage 129 | 130 | ``` 131 | Container( 132 | child: LoginScreen2( 133 | backgroundColor1: Color(0xFF444152), 134 | backgroundColor2: Color(0xFF6f6c7d), 135 | highlightColor: Color(0xfff65aa3), 136 | foregroundColor: Colors.white, 137 | logo: new AssetImage("assets/images/full-bloom.png"), 138 | ), 139 | ) 140 | ``` 141 | 142 | ### Login Screen 3 143 | 144 | ![Screenshots on Android and iOS](./screenshots/login_screen_3.gif) 145 | 146 | ##### Usage 147 | 148 | ``` 149 | Container( 150 | child: LoginScreen3(), 151 | ) 152 | ``` 153 | 154 | ### Login Screen 4 155 | 156 | ![Screenshot on Android](./screenshots/login_screen_4.jpeg) 157 | 158 | ##### Usage 159 | 160 | ``` 161 | Container( 162 | child: LoginScreen4( 163 | primaryColor: Color(0xff18203d), 164 | secondaryColor: Color(0xff232c51), 165 | logoGreen: Color(0xff25bcbb), 166 | ), 167 | ) 168 | ``` 169 | 170 | ### Login Screen 5 171 | 172 | ![Screenshot on Android](./screenshots/login_screen_5.jpeg) 173 | 174 | ##### Usage 175 | 176 | ``` 177 | Container( 178 | child: LoginScreen5( 179 | avatarImage: "path/to/image.png", 180 | onLoginClick: () { 181 | // when login button is pressed 182 | }, 183 | googleSignIn: () { 184 | // when google signin button is pressed 185 | }, 186 | navigatePage: () { 187 | // change to signup screen 188 | } 189 | ), 190 | ) 191 | ``` 192 | 193 | ### Login Screen 6 194 | 195 | ![Screenshot on Android](./screenshots/login_screen_6.jpeg) 196 | 197 | ##### Usage 198 | 199 | ``` 200 | Container( 201 | child: LoginScreen6( 202 | onLoginClick: () { 203 | // when login button is pressed 204 | }, 205 | navigatePage: () { 206 | // change to signup screen 207 | } 208 | ), 209 | ) 210 | ``` 211 | 212 | ## Contribution and Donation 213 | 214 | Feel free to contribute. If you like the project and want to donate, [click here](https://www.paypal.me/samarthagarwal). 215 | -------------------------------------------------------------------------------- /assets/fonts/IcoMoon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/assets/fonts/IcoMoon.ttf -------------------------------------------------------------------------------- /assets/images/full-bloom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/assets/images/full-bloom.png -------------------------------------------------------------------------------- /assets/images/mountains.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/assets/images/mountains.jpeg -------------------------------------------------------------------------------- /assets/images/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/assets/images/mountains.jpg -------------------------------------------------------------------------------- /example_1: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/example_1 -------------------------------------------------------------------------------- /flutter_login_screens_android.iml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /lib/Examples/buttons.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import '../buttons/simple_round_button.dart'; 3 | import '../buttons/simple_round_icon_button.dart'; 4 | import '../buttons/simple_round_only_icon_button.dart'; 5 | 6 | class ButtonExample extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return Scaffold( 10 | body: new Container( 11 | padding: EdgeInsets.only(top: 30.0), 12 | color: Colors.white, 13 | height: MediaQuery.of(context).size.height, 14 | child: SingleChildScrollView( 15 | child: new Column( 16 | children: [ 17 | SimpleRoundButton( 18 | backgroundColor: Colors.redAccent, 19 | buttonText: Text( 20 | "LOGIN", 21 | style: TextStyle(color: Colors.white), 22 | ), 23 | ), 24 | SimpleRoundIconButton( 25 | backgroundColor: Colors.orangeAccent, 26 | buttonText: Text( 27 | "SEND EMAIL", 28 | style: TextStyle(color: Colors.white), 29 | ), 30 | icon: Icon(Icons.email), 31 | ), 32 | SimpleRoundIconButton( 33 | backgroundColor: Colors.pinkAccent, 34 | buttonText: Text( 35 | "LISTEN TO MUSIC", 36 | style: TextStyle(color: Colors.white), 37 | ), 38 | icon: Icon(Icons.headset_mic), 39 | iconAlignment: Alignment.centerRight, 40 | ), 41 | SimpleRoundIconButton( 42 | backgroundColor: Colors.deepOrangeAccent, 43 | buttonText: Text( 44 | "SHARE ON SOCIAL", 45 | style: TextStyle(color: Colors.white), 46 | ), 47 | icon: Icon(Icons.share), 48 | ), 49 | SimpleRoundOnlyIconButton( 50 | backgroundColor: Colors.lightGreen, 51 | icon: Icon(Icons.share), 52 | iconAlignment: Alignment.center, 53 | ), 54 | new Row( 55 | children: [ 56 | new Container( 57 | width: MediaQuery.of(context).size.width * 0.5, 58 | child: SimpleRoundOnlyIconButton( 59 | backgroundColor: Colors.blueAccent, 60 | icon: Icon(Icons.phone), 61 | iconAlignment: Alignment.center, 62 | ), 63 | ), 64 | new Container( 65 | width: MediaQuery.of(context).size.width * 0.5, 66 | child: SimpleRoundOnlyIconButton( 67 | backgroundColor: Colors.redAccent, 68 | icon: Icon(Icons.message), 69 | iconAlignment: Alignment.center, 70 | ), 71 | ), 72 | ], 73 | ), 74 | SimpleRoundOnlyIconButton( 75 | backgroundColor: Colors.green, 76 | icon: Icon(Icons.message), 77 | iconColor: Colors.redAccent, 78 | iconAlignment: Alignment.centerRight, 79 | ), 80 | SimpleRoundOnlyIconButton( 81 | backgroundColor: Colors.redAccent, 82 | icon: Icon(Icons.details), 83 | iconColor: Colors.redAccent, 84 | iconAlignment: Alignment.centerLeft, 85 | ), 86 | new Row( 87 | children: [ 88 | new Container( 89 | width: MediaQuery.of(context).size.width * 0.66, 90 | child: SimpleRoundIconButton( 91 | backgroundColor: Colors.deepOrangeAccent, 92 | buttonText: Text( 93 | "PLAY", 94 | style: TextStyle(color: Colors.white), 95 | ), 96 | icon: Icon(Icons.play_arrow), 97 | iconAlignment: Alignment.centerRight, 98 | ), 99 | ), 100 | new Container( 101 | width: MediaQuery.of(context).size.width * 0.33, 102 | child: SimpleRoundButton( 103 | backgroundColor: Colors.greenAccent, 104 | buttonText: Text( 105 | "OK", 106 | style: TextStyle(color: Colors.green), 107 | ), 108 | ), 109 | ), 110 | ], 111 | ), 112 | ], 113 | ), 114 | ), 115 | ), 116 | ); 117 | } 118 | } 119 | -------------------------------------------------------------------------------- /lib/buttons/simple_round_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SimpleRoundButton extends StatelessWidget { 4 | final Color? backgroundColor; 5 | final Text? buttonText; 6 | final Function? onPressed; 7 | 8 | SimpleRoundButton({this.backgroundColor, this.buttonText, this.onPressed}); 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return Container( 13 | margin: const EdgeInsets.only(top: 20.0), 14 | padding: const EdgeInsets.only(left: 20.0, right: 20.0), 15 | child: new Row( 16 | children: [ 17 | new Expanded( 18 | child: TextButton( 19 | style: ButtonStyle( 20 | shape: MaterialStateProperty.all(RoundedRectangleBorder( 21 | borderRadius: new BorderRadius.circular(30.0))), 22 | overlayColor: MaterialStateProperty.all(this.backgroundColor), 23 | backgroundColor: MaterialStateProperty.all(this.backgroundColor), 24 | ), 25 | child: new Row( 26 | mainAxisAlignment: MainAxisAlignment.center, 27 | children: [ 28 | new Padding( 29 | padding: const EdgeInsets.only(top: 20.0, bottom: 20.0), 30 | child: buttonText, 31 | ), 32 | ], 33 | ), 34 | onPressed: () => onPressed!(), 35 | ), 36 | ), 37 | ], 38 | ), 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /lib/buttons/simple_round_icon_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SimpleRoundIconButton extends StatelessWidget { 4 | final Color backgroundColor; 5 | final Text buttonText; 6 | final Icon icon; 7 | final Color? iconColor; 8 | final Alignment iconAlignment; 9 | final Function? onPressed; 10 | 11 | SimpleRoundIconButton( 12 | {this.backgroundColor = Colors.redAccent, 13 | this.buttonText = const Text("REQUIRED TEXT"), 14 | this.icon = const Icon(Icons.email), 15 | this.iconColor, 16 | this.iconAlignment = Alignment.centerLeft, 17 | this.onPressed}); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Container( 22 | margin: const EdgeInsets.only(top: 20.0), 23 | padding: const EdgeInsets.only(left: 20.0, right: 20.0), 24 | child: Column( 25 | mainAxisAlignment: MainAxisAlignment.center, 26 | crossAxisAlignment: CrossAxisAlignment.center, 27 | mainAxisSize: MainAxisSize.max, 28 | children: [ 29 | new Row( 30 | mainAxisAlignment: MainAxisAlignment.center, 31 | crossAxisAlignment: CrossAxisAlignment.center, 32 | children: [ 33 | TextButton( 34 | style: ButtonStyle( 35 | shape: MaterialStateProperty.all(RoundedRectangleBorder( 36 | borderRadius: new BorderRadius.circular(30.0))), 37 | overlayColor: MaterialStateProperty.all(this.backgroundColor), 38 | backgroundColor: 39 | MaterialStateProperty.all(this.backgroundColor), 40 | ), 41 | child: new Row( 42 | children: [ 43 | iconAlignment == Alignment.centerLeft 44 | ? new Transform.translate( 45 | offset: Offset(-10.0, 0.0), 46 | child: new Container( 47 | padding: const EdgeInsets.all(5.0), 48 | child: FlatButton( 49 | shape: new RoundedRectangleBorder( 50 | borderRadius: 51 | new BorderRadius.circular(28.0)), 52 | splashColor: Colors.white, 53 | color: Colors.white, 54 | child: Icon( 55 | icon.icon, 56 | color: iconColor == null 57 | ? backgroundColor 58 | : iconColor, 59 | ), 60 | onPressed: () => {}, 61 | ), 62 | ), 63 | ) 64 | : Container(), 65 | iconAlignment == Alignment.centerLeft 66 | ? Container() 67 | : Container(), 68 | new Padding( 69 | padding: const EdgeInsets.only( 70 | top: 20.0, bottom: 20.0, left: 20.0, right: 20.0), 71 | child: buttonText, 72 | ), 73 | iconAlignment == Alignment.centerRight 74 | ? Container() 75 | : Container(), 76 | iconAlignment == Alignment.centerRight 77 | ? new Transform.translate( 78 | offset: Offset(10.0, 0.0), 79 | child: new Container( 80 | padding: const EdgeInsets.all(5.0), 81 | child: FlatButton( 82 | shape: new RoundedRectangleBorder( 83 | borderRadius: 84 | new BorderRadius.circular(28.0)), 85 | splashColor: Colors.white, 86 | color: Colors.white, 87 | child: Icon( 88 | icon.icon, 89 | color: iconColor == null 90 | ? backgroundColor 91 | : iconColor, 92 | ), 93 | onPressed: () => {}, 94 | ), 95 | ), 96 | ) 97 | : Container() 98 | ], 99 | ), 100 | onPressed: () => onPressed!(), 101 | ), 102 | ], 103 | ), 104 | ], 105 | ), 106 | ); 107 | } 108 | } 109 | -------------------------------------------------------------------------------- /lib/buttons/simple_round_only_icon_button.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SimpleRoundOnlyIconButton extends StatelessWidget { 4 | final Color backgroundColor; 5 | final Icon? icon; 6 | final Color? iconColor; 7 | final Alignment iconAlignment; 8 | final Function? onPressed; 9 | 10 | SimpleRoundOnlyIconButton( 11 | {this.backgroundColor = Colors.redAccent, 12 | this.icon, 13 | this.iconColor, 14 | this.iconAlignment = Alignment.center, 15 | this.onPressed}); 16 | 17 | MainAxisAlignment getMainAxisAlignment() { 18 | if (this.iconAlignment == Alignment.center) { 19 | return MainAxisAlignment.center; 20 | } else if (this.iconAlignment == Alignment.centerLeft) { 21 | return MainAxisAlignment.start; 22 | } else if (this.iconAlignment == Alignment.centerRight) { 23 | return MainAxisAlignment.end; 24 | } 25 | return MainAxisAlignment.center; 26 | } 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return Container( 31 | margin: const EdgeInsets.only(top: 20.0), 32 | padding: const EdgeInsets.only(left: 20.0, right: 20.0), 33 | child: Column( 34 | mainAxisAlignment: MainAxisAlignment.center, 35 | children: [ 36 | new Row( 37 | children: [ 38 | new Expanded( 39 | child: TextButton( 40 | style: ButtonStyle( 41 | shape: MaterialStateProperty.all(RoundedRectangleBorder( 42 | borderRadius: new BorderRadius.circular(30.0))), 43 | overlayColor: 44 | MaterialStateProperty.all(this.backgroundColor), 45 | backgroundColor: 46 | MaterialStateProperty.all(this.backgroundColor), 47 | ), 48 | child: new Row( 49 | mainAxisAlignment: getMainAxisAlignment(), 50 | children: [ 51 | iconAlignment == Alignment.center 52 | ? new Transform.translate( 53 | offset: Offset(0.0, 0.0), 54 | child: new Container( 55 | padding: const EdgeInsets.only( 56 | left: 5.0, 57 | right: 5.0, 58 | top: 10.0, 59 | bottom: 10.0), 60 | child: TextButton( 61 | style: ButtonStyle( 62 | shape: MaterialStateProperty.all( 63 | RoundedRectangleBorder( 64 | borderRadius: 65 | BorderRadius.circular(28.0), 66 | ), 67 | ), 68 | overlayColor: MaterialStateProperty.all( 69 | backgroundColor), 70 | backgroundColor: MaterialStateProperty.all( 71 | backgroundColor), 72 | ), 73 | child: Icon( 74 | icon!.icon, 75 | color: iconColor == null 76 | ? Colors.white 77 | : iconColor, 78 | ), 79 | onPressed: () => {}, 80 | ), 81 | ), 82 | ) 83 | : Container(), 84 | iconAlignment == Alignment.centerLeft 85 | ? new Transform.translate( 86 | offset: Offset(-10.0, 0.0), 87 | child: new Container( 88 | padding: const EdgeInsets.only( 89 | left: 5.0, 90 | right: 5.0, 91 | top: 10.0, 92 | bottom: 10.0), 93 | child: TextButton( 94 | style: ButtonStyle( 95 | shape: MaterialStateProperty.all( 96 | RoundedRectangleBorder( 97 | borderRadius: 98 | BorderRadius.circular(28.0), 99 | ), 100 | ), 101 | overlayColor: 102 | MaterialStateProperty.all(Colors.white), 103 | backgroundColor: 104 | MaterialStateProperty.all(Colors.white), 105 | ), 106 | child: Icon( 107 | icon!.icon, 108 | color: iconColor == null 109 | ? Colors.white 110 | : iconColor, 111 | ), 112 | onPressed: () => {}, 113 | ), 114 | ), 115 | ) 116 | : Container(), 117 | iconAlignment == Alignment.centerRight || 118 | iconAlignment == Alignment.centerLeft 119 | ? Expanded( 120 | child: Container(), 121 | ) 122 | : Container(), 123 | iconAlignment == Alignment.centerRight 124 | ? new Transform.translate( 125 | offset: Offset(10.0, 0.0), 126 | child: new Container( 127 | padding: const EdgeInsets.only( 128 | left: 5.0, 129 | right: 5.0, 130 | top: 10.0, 131 | bottom: 10.0), 132 | child: FlatButton( 133 | shape: new RoundedRectangleBorder( 134 | borderRadius: 135 | new BorderRadius.circular(28.0)), 136 | splashColor: Colors.white, 137 | color: Colors.white, 138 | child: Icon( 139 | icon!.icon, 140 | color: this.iconColor, 141 | ), 142 | onPressed: () => {}, 143 | ), 144 | ), 145 | ) 146 | : Container() 147 | ], 148 | ), 149 | onPressed: () => onPressed!(), 150 | ), 151 | ), 152 | ], 153 | ), 154 | ], 155 | ), 156 | ); 157 | } 158 | } 159 | -------------------------------------------------------------------------------- /lib/experiments/graph.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | import 'package:vector_math/vector_math.dart' as Vector; 4 | 5 | class Graph extends StatefulWidget { 6 | @override 7 | _GraphState createState() => _GraphState(); 8 | } 9 | 10 | class _GraphState extends State with SingleTickerProviderStateMixin { 11 | late Animation animation; 12 | late AnimationController controller; 13 | 14 | @override 15 | void initState() { 16 | super.initState(); 17 | 18 | controller = AnimationController( 19 | vsync: this, duration: Duration(milliseconds: 3143)); 20 | animation = Tween(begin: 0.0, end: 1.0).animate( 21 | CurvedAnimation(parent: controller, curve: Interval(0.0, 1.0))); 22 | 23 | controller.addListener(() { 24 | setState(() {}); 25 | }); 26 | 27 | controller.repeat(); 28 | } 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return Center( 33 | child: Stack( 34 | children: [ 35 | CustomPaint( 36 | painter: GraphPaint(controller.value), 37 | child: Container(height: 200.0, color: Colors.black12), 38 | ), 39 | Positioned( 40 | left: MediaQuery.of(context).size.width - 5, 41 | top: sin((controller.value * 360 - 42 | MediaQuery.of(context).size.width) % 43 | 360 * 44 | Vector.degrees2Radians) * 45 | 0.9 * 46 | 100 + 47 | 100, 48 | child: Container( 49 | width: 10.0, 50 | height: 10.0, 51 | decoration: BoxDecoration( 52 | color: Colors.redAccent, shape: BoxShape.circle), 53 | ), 54 | ) 55 | ], 56 | ), 57 | ); 58 | } 59 | } 60 | 61 | class GraphPaint extends CustomPainter { 62 | double time; 63 | 64 | GraphPaint(this.time); 65 | 66 | @override 67 | void paint(Canvas canvas, Size size) { 68 | Paint p1 = new Paint() 69 | ..color = Colors.deepOrangeAccent 70 | ..strokeWidth = 2.0 71 | ..strokeCap = StrokeCap.round 72 | ..style = PaintingStyle.stroke; 73 | 74 | for (int i = 0; i <= size.width; i += 1) { 75 | canvas.drawLine( 76 | new Offset( 77 | i.toDouble(), 78 | (sin((time * 360 - i) % 360 * Vector.degrees2Radians) * 79 | 0.9 * 80 | size.height / 81 | 2 + 82 | size.height / 2)), 83 | new Offset( 84 | i.toDouble(), 85 | (sin((time * 360 - i) % 360 * Vector.degrees2Radians) * 86 | 0.9 * 87 | size.height / 88 | 2 + 89 | size.height / 2)), 90 | p1); 91 | } 92 | } 93 | 94 | @override 95 | bool shouldRepaint(CustomPainter oldDelegate) { 96 | return true; 97 | } 98 | } 99 | -------------------------------------------------------------------------------- /lib/loaders/color_loader.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:async'; 3 | 4 | class ColorLoader extends StatefulWidget { 5 | final List? colors; 6 | final Duration? duration; 7 | 8 | ColorLoader({this.colors, this.duration}); 9 | 10 | @override 11 | _ColorLoaderState createState() => 12 | _ColorLoaderState(this.colors!, this.duration!); 13 | } 14 | 15 | class _ColorLoaderState extends State 16 | with SingleTickerProviderStateMixin { 17 | final List colors; 18 | final Duration duration; 19 | late Timer timer; 20 | 21 | _ColorLoaderState(this.colors, this.duration); 22 | 23 | //noSuchMethod(Invocation i) => super.noSuchMethod(i); 24 | 25 | List tweenAnimations = []; 26 | int tweenIndex = 0; 27 | 28 | late AnimationController controller; 29 | List> colorAnimations = []; 30 | 31 | @override 32 | void initState() { 33 | super.initState(); 34 | 35 | 36 | 37 | controller = new AnimationController( 38 | vsync: this, 39 | duration: duration, 40 | ); 41 | 42 | for (int i = 0; i < colors.length - 1; i++) { 43 | tweenAnimations.add(ColorTween(begin: colors[i], end: colors[i + 1])); 44 | } 45 | 46 | tweenAnimations 47 | .add(ColorTween(begin: colors[colors.length - 1], end: colors[0])); 48 | 49 | for (int i = 0; i < colors.length; i++) { 50 | Animation animation = tweenAnimations[i].animate(CurvedAnimation( 51 | parent: controller, 52 | curve: Interval((1 / colors.length) * (i + 1) - 0.05, 53 | (1 / colors.length) * (i + 1), 54 | curve: Curves.linear))); 55 | 56 | colorAnimations.add(animation); 57 | } 58 | 59 | print(colorAnimations.length); 60 | 61 | tweenIndex = 0; 62 | 63 | timer = Timer.periodic(duration, (Timer t) { 64 | setState(() { 65 | tweenIndex = (tweenIndex + 1) % colors.length; 66 | }); 67 | }); 68 | 69 | controller.forward(); 70 | } 71 | 72 | @override 73 | Widget build(BuildContext context) { 74 | return Container( 75 | child: Center( 76 | child: CircularProgressIndicator( 77 | strokeWidth: 5.0, 78 | valueColor: colorAnimations[tweenIndex], 79 | ), 80 | ), 81 | ); 82 | } 83 | 84 | @override 85 | void dispose() { 86 | timer.cancel(); 87 | controller.dispose(); 88 | super.dispose(); 89 | } 90 | } 91 | -------------------------------------------------------------------------------- /lib/loaders/color_loader_2.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | 4 | class ColorLoader2 extends StatefulWidget { 5 | final Color color1; 6 | final Color color2; 7 | final Color color3; 8 | 9 | ColorLoader2( 10 | {this.color1 = Colors.deepOrangeAccent, 11 | this.color2 = Colors.yellow, 12 | this.color3 = Colors.lightGreen}); 13 | 14 | @override 15 | _ColorLoader2State createState() => _ColorLoader2State(); 16 | } 17 | 18 | class _ColorLoader2State extends State 19 | with TickerProviderStateMixin { 20 | late Animation animation1; 21 | late Animation animation2; 22 | late Animation animation3; 23 | late AnimationController controller1; 24 | late AnimationController controller2; 25 | late AnimationController controller3; 26 | 27 | @override 28 | void initState() { 29 | super.initState(); 30 | 31 | controller1 = AnimationController( 32 | duration: const Duration(milliseconds: 1200), vsync: this); 33 | 34 | controller2 = AnimationController( 35 | duration: const Duration(milliseconds: 900), vsync: this); 36 | 37 | controller3 = AnimationController( 38 | duration: const Duration(milliseconds: 2000), vsync: this); 39 | 40 | animation1 = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( 41 | parent: controller1, curve: Interval(0.0, 1.0, curve: Curves.linear))); 42 | 43 | animation2 = Tween(begin: -1.0, end: 0.0).animate(CurvedAnimation( 44 | parent: controller2, curve: Interval(0.0, 1.0, curve: Curves.easeIn))); 45 | 46 | animation3 = Tween(begin: 0.0, end: 1.0).animate(CurvedAnimation( 47 | parent: controller3, 48 | curve: Interval(0.0, 1.0, curve: Curves.decelerate))); 49 | 50 | controller1.repeat(); 51 | controller2.repeat(); 52 | controller3.repeat(); 53 | } 54 | 55 | @override 56 | Widget build(BuildContext context) { 57 | return Center( 58 | child: Container( 59 | child: Stack( 60 | children: [ 61 | new RotationTransition( 62 | turns: animation1, 63 | child: CustomPaint( 64 | painter: Arc1Painter(widget.color1), 65 | child: Container( 66 | width: 50.0, 67 | height: 50.0, 68 | ), 69 | ), 70 | ), 71 | new RotationTransition( 72 | turns: animation2, 73 | child: CustomPaint( 74 | painter: Arc2Painter(widget.color2), 75 | child: Container( 76 | width: 50.0, 77 | height: 50.0, 78 | ), 79 | ), 80 | ), 81 | new RotationTransition( 82 | turns: animation3, 83 | child: CustomPaint( 84 | painter: Arc3Painter(widget.color3), 85 | child: Container( 86 | width: 50.0, 87 | height: 50.0, 88 | ), 89 | ), 90 | ) 91 | ], 92 | ), 93 | ), 94 | ); 95 | } 96 | 97 | @override 98 | void dispose() { 99 | controller1.dispose(); 100 | controller2.dispose(); 101 | controller3.dispose(); 102 | super.dispose(); 103 | } 104 | } 105 | 106 | class Arc1Painter extends CustomPainter { 107 | final Color color; 108 | 109 | Arc1Painter(this.color); 110 | 111 | @override 112 | void paint(Canvas canvas, Size size) { 113 | Paint p1 = new Paint() 114 | ..color = color 115 | ..strokeWidth = 2.0 116 | ..strokeCap = StrokeCap.round 117 | ..style = PaintingStyle.stroke; 118 | 119 | Rect rect1 = new Rect.fromLTWH(0.0, 0.0, size.width, size.height); 120 | 121 | canvas.drawArc(rect1, 0.0, 0.5 * pi, false, p1); 122 | canvas.drawArc(rect1, 0.6 * pi, 0.8 * pi, false, p1); 123 | canvas.drawArc(rect1, 1.5 * pi, 0.4 * pi, false, p1); 124 | } 125 | 126 | @override 127 | bool shouldRepaint(CustomPainter oldDelegate) { 128 | return true; 129 | } 130 | } 131 | 132 | class Arc2Painter extends CustomPainter { 133 | final Color color; 134 | 135 | Arc2Painter(this.color); 136 | 137 | @override 138 | void paint(Canvas canvas, Size size) { 139 | Paint p2 = new Paint() 140 | ..color = color 141 | ..strokeWidth = 2.0 142 | ..strokeCap = StrokeCap.round 143 | ..style = PaintingStyle.stroke; 144 | 145 | Rect rect2 = new Rect.fromLTWH( 146 | 0.0 + (0.2 * size.width) / 2, 147 | 0.0 + (0.2 * size.height) / 2, 148 | size.width - 0.2 * size.width, 149 | size.height - 0.2 * size.height); 150 | 151 | canvas.drawArc(rect2, 0.0, 0.5 * pi, false, p2); 152 | canvas.drawArc(rect2, 0.8 * pi, 0.6 * pi, false, p2); 153 | canvas.drawArc(rect2, 1.6 * pi, 0.2 * pi, false, p2); 154 | } 155 | 156 | @override 157 | bool shouldRepaint(CustomPainter oldDelegate) { 158 | return true; 159 | } 160 | } 161 | 162 | class Arc3Painter extends CustomPainter { 163 | final Color color; 164 | 165 | Arc3Painter(this.color); 166 | 167 | @override 168 | void paint(Canvas canvas, Size size) { 169 | Paint p3 = new Paint() 170 | ..color = color 171 | ..strokeWidth = 1.5 172 | ..strokeCap = StrokeCap.round 173 | ..style = PaintingStyle.stroke; 174 | 175 | Rect rect3 = new Rect.fromLTWH( 176 | 0.0 + (0.4 * size.width) / 2, 177 | 0.0 + (0.4 * size.height) / 2, 178 | size.width - 0.4 * size.width, 179 | size.height - 0.4 * size.height); 180 | 181 | canvas.drawArc(rect3, 0.0, 0.9 * pi, false, p3); 182 | canvas.drawArc(rect3, 1.1 * pi, 0.8 * pi, false, p3); 183 | } 184 | 185 | @override 186 | bool shouldRepaint(CustomPainter oldDelegate) { 187 | return true; 188 | } 189 | } 190 | -------------------------------------------------------------------------------- /lib/loaders/color_loader_3.dart: -------------------------------------------------------------------------------- 1 | import "package:flutter/material.dart"; 2 | import 'dart:math'; 3 | 4 | class ColorLoader3 extends StatefulWidget { 5 | final double radius; 6 | final double dotRadius; 7 | 8 | ColorLoader3({this.radius = 30.0, this.dotRadius = 3.0}); 9 | 10 | @override 11 | _ColorLoader3State createState() => _ColorLoader3State(); 12 | } 13 | 14 | class _ColorLoader3State extends State 15 | with SingleTickerProviderStateMixin { 16 | late Animation animation_rotation; 17 | late Animation animation_radius_in; 18 | late Animation animation_radius_out; 19 | late AnimationController controller; 20 | 21 | late double radius; 22 | late double dotRadius; 23 | 24 | @override 25 | void initState() { 26 | super.initState(); 27 | 28 | radius = widget.radius; 29 | dotRadius = widget.dotRadius; 30 | 31 | print(dotRadius); 32 | 33 | controller = AnimationController( 34 | lowerBound: 0.0, 35 | upperBound: 1.0, 36 | duration: const Duration(milliseconds: 3000), 37 | vsync: this); 38 | 39 | animation_rotation = Tween(begin: 0.0, end: 1.0).animate( 40 | CurvedAnimation( 41 | parent: controller, 42 | curve: Interval(0.0, 1.0, curve: Curves.linear), 43 | ), 44 | ); 45 | 46 | animation_radius_in = Tween(begin: 1.0, end: 0.0).animate( 47 | CurvedAnimation( 48 | parent: controller, 49 | curve: Interval(0.75, 1.0, curve: Curves.elasticIn), 50 | ), 51 | ); 52 | 53 | animation_radius_out = Tween(begin: 0.0, end: 1.0).animate( 54 | CurvedAnimation( 55 | parent: controller, 56 | curve: Interval(0.0, 0.25, curve: Curves.elasticOut), 57 | ), 58 | ); 59 | 60 | controller.addListener(() { 61 | setState(() { 62 | if (controller.value >= 0.75 && controller.value <= 1.0) 63 | radius = widget.radius * animation_radius_in.value; 64 | else if (controller.value >= 0.0 && controller.value <= 0.25) 65 | radius = widget.radius * animation_radius_out.value; 66 | }); 67 | }); 68 | 69 | controller.addStatusListener((status) { 70 | if (status == AnimationStatus.completed) {} 71 | }); 72 | 73 | controller.repeat(); 74 | } 75 | 76 | @override 77 | Widget build(BuildContext context) { 78 | return Container( 79 | width: 100.0, 80 | height: 100.0, 81 | //color: Colors.black12, 82 | child: new Center( 83 | child: new RotationTransition( 84 | 85 | turns: animation_rotation, 86 | child: new Container( 87 | //color: Colors.limeAccent, 88 | child: new Center( 89 | child: Stack( 90 | children: [ 91 | new Transform.translate( 92 | offset: Offset(0.0, 0.0), 93 | child: Dot( 94 | radius: radius, 95 | color: Colors.black12, 96 | ), 97 | ), 98 | new Transform.translate( 99 | child: Dot( 100 | radius: dotRadius, 101 | color: Colors.amber, 102 | ), 103 | offset: Offset( 104 | radius * cos(0.0), 105 | radius * sin(0.0), 106 | ), 107 | ), 108 | new Transform.translate( 109 | child: Dot( 110 | radius: dotRadius, 111 | color: Colors.deepOrangeAccent, 112 | ), 113 | offset: Offset( 114 | radius * cos(0.0 + 1 * pi / 4), 115 | radius * sin(0.0 + 1 * pi / 4), 116 | ), 117 | ), 118 | new Transform.translate( 119 | child: Dot( 120 | radius: dotRadius, 121 | color: Colors.pinkAccent, 122 | ), 123 | offset: Offset( 124 | radius * cos(0.0 + 2 * pi / 4), 125 | radius * sin(0.0 + 2 * pi / 4), 126 | ), 127 | ), 128 | new Transform.translate( 129 | child: Dot( 130 | radius: dotRadius, 131 | color: Colors.purple, 132 | ), 133 | offset: Offset( 134 | radius * cos(0.0 + 3 * pi / 4), 135 | radius * sin(0.0 + 3 * pi / 4), 136 | ), 137 | ), 138 | new Transform.translate( 139 | child: Dot( 140 | radius: dotRadius, 141 | color: Colors.yellow, 142 | ), 143 | offset: Offset( 144 | radius * cos(0.0 + 4 * pi / 4), 145 | radius * sin(0.0 + 4 * pi / 4), 146 | ), 147 | ), 148 | new Transform.translate( 149 | child: Dot( 150 | radius: dotRadius, 151 | color: Colors.lightGreen, 152 | ), 153 | offset: Offset( 154 | radius * cos(0.0 + 5 * pi / 4), 155 | radius * sin(0.0 + 5 * pi / 4), 156 | ), 157 | ), 158 | new Transform.translate( 159 | child: Dot( 160 | radius: dotRadius, 161 | color: Colors.orangeAccent, 162 | ), 163 | offset: Offset( 164 | radius * cos(0.0 + 6 * pi / 4), 165 | radius * sin(0.0 + 6 * pi / 4), 166 | ), 167 | ), 168 | new Transform.translate( 169 | child: Dot( 170 | radius: dotRadius, 171 | color: Colors.blueAccent, 172 | ), 173 | offset: Offset( 174 | radius * cos(0.0 + 7 * pi / 4), 175 | radius * sin(0.0 + 7 * pi / 4), 176 | ), 177 | ), 178 | ], 179 | ), 180 | ), 181 | ), 182 | ), 183 | ), 184 | ); 185 | } 186 | 187 | @override 188 | void dispose() { 189 | 190 | controller.dispose(); 191 | super.dispose(); 192 | } 193 | } 194 | 195 | class Dot extends StatelessWidget { 196 | final double? radius; 197 | final Color? color; 198 | 199 | Dot({this.radius, this.color}); 200 | 201 | @override 202 | Widget build(BuildContext context) { 203 | return new Center( 204 | child: Container( 205 | width: radius, 206 | height: radius, 207 | decoration: BoxDecoration(color: color, shape: BoxShape.circle), 208 | 209 | ), 210 | ); 211 | } 212 | } 213 | -------------------------------------------------------------------------------- /lib/loaders/color_loader_4.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | import 'dot_type.dart'; 4 | 5 | class ColorLoader4 extends StatefulWidget { 6 | 7 | final Color dotOneColor; 8 | final Color dotTwoColor; 9 | final Color dotThreeColor; 10 | final Duration duration; 11 | final DotType dotType; 12 | final Icon dotIcon; 13 | 14 | ColorLoader4({ 15 | this.dotOneColor = Colors.redAccent, 16 | this.dotTwoColor = Colors.green, 17 | this.dotThreeColor = Colors.blueAccent, 18 | this.duration = const Duration(milliseconds: 1000), 19 | this.dotType = DotType.circle, 20 | this.dotIcon = const Icon(Icons.blur_on) 21 | }); 22 | 23 | @override 24 | _ColorLoader4State createState() => _ColorLoader4State(); 25 | } 26 | 27 | class _ColorLoader4State extends State 28 | with SingleTickerProviderStateMixin { 29 | late Animation animation_1; 30 | late Animation animation_2; 31 | late Animation animation_3; 32 | late AnimationController controller; 33 | 34 | @override 35 | void initState() { 36 | super.initState(); 37 | 38 | controller = AnimationController( 39 | duration: widget.duration, vsync: this); 40 | 41 | animation_1 = Tween(begin: 0.0, end: 1.0).animate( 42 | CurvedAnimation( 43 | parent: controller, 44 | curve: Interval(0.0, 0.80, curve: Curves.ease), 45 | ), 46 | ); 47 | 48 | animation_2 = Tween(begin: 0.0, end: 1.0).animate( 49 | CurvedAnimation( 50 | parent: controller, 51 | curve: Interval(0.1, 0.9, curve: Curves.ease), 52 | ), 53 | ); 54 | 55 | animation_3 = Tween(begin: 0.0, end: 1.0).animate( 56 | CurvedAnimation( 57 | parent: controller, 58 | curve: Interval(0.2, 1.0, curve: Curves.ease), 59 | ), 60 | ); 61 | 62 | controller.addListener(() { 63 | setState(() { 64 | //print(animation_1.value); 65 | }); 66 | }); 67 | 68 | controller.repeat(); 69 | } 70 | 71 | @override 72 | Widget build(BuildContext context) { 73 | return Container( 74 | child: new Row( 75 | mainAxisAlignment: MainAxisAlignment.center, 76 | children: [ 77 | new Transform.translate( 78 | offset: Offset( 79 | 0.0, 80 | -30 * 81 | (animation_1.value <= 0.50 82 | ? animation_1.value 83 | : 1.0 - animation_1.value), 84 | ), 85 | child: new Padding( 86 | padding: const EdgeInsets.only(right: 8.0), 87 | child: Dot( 88 | radius: 10.0, 89 | color: widget.dotOneColor, 90 | type: widget.dotType, 91 | icon: widget.dotIcon, 92 | ), 93 | ), 94 | ), 95 | Transform.translate( 96 | offset: Offset( 97 | 0.0, 98 | -30 * 99 | (animation_2.value <= 0.50 100 | ? animation_2.value 101 | : 1.0 - animation_2.value), 102 | ), 103 | child: new Padding( 104 | padding: const EdgeInsets.only(right: 8.0), 105 | child: Dot( 106 | radius: 10.0, 107 | color: widget.dotTwoColor, 108 | type: widget.dotType, 109 | icon: widget.dotIcon, 110 | ), 111 | ), 112 | ), 113 | Transform.translate( 114 | offset: Offset( 115 | 0.0, 116 | -30 * 117 | (animation_3.value <= 0.50 118 | ? animation_3.value 119 | : 1.0 - animation_3.value), 120 | ), 121 | child: new Padding( 122 | padding: const EdgeInsets.only(right: 8.0), 123 | child: Dot( 124 | radius: 10.0, 125 | color: widget.dotThreeColor, 126 | type: widget.dotType, 127 | icon: widget.dotIcon, 128 | ), 129 | ), 130 | ), 131 | ], 132 | ), 133 | ); 134 | } 135 | 136 | @override 137 | void dispose() { 138 | 139 | controller.dispose(); 140 | super.dispose(); 141 | } 142 | } 143 | 144 | class Dot extends StatelessWidget { 145 | final double? radius; 146 | final Color? color; 147 | final DotType? type; 148 | final Icon? icon; 149 | 150 | Dot({this.radius, this.color, this.type, this.icon}); 151 | 152 | @override 153 | Widget build(BuildContext context) { 154 | return new Center( 155 | child: type == DotType.icon ? 156 | Icon(icon!.icon, color: color, size: 1.3 * radius!,) 157 | : new Transform.rotate( 158 | angle: type == DotType.diamond ? pi/4 : 0.0, 159 | child: Container( 160 | width: radius, 161 | height: radius, 162 | decoration: BoxDecoration(color: color, shape: type == DotType.circle? BoxShape.circle : BoxShape.rectangle), 163 | ), 164 | ), 165 | ); 166 | } 167 | } 168 | -------------------------------------------------------------------------------- /lib/loaders/color_loader_5.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | import 'dot_type.dart'; 4 | 5 | class ColorLoader5 extends StatefulWidget { 6 | 7 | final Color dotOneColor; 8 | final Color dotTwoColor; 9 | final Color dotThreeColor; 10 | final Duration duration; 11 | final DotType dotType; 12 | final Icon dotIcon; 13 | 14 | ColorLoader5({ 15 | this.dotOneColor = Colors.redAccent, 16 | this.dotTwoColor = Colors.green, 17 | this.dotThreeColor = Colors.blueAccent, 18 | this.duration = const Duration(milliseconds: 1000), 19 | this.dotType = DotType.circle, 20 | this.dotIcon = const Icon(Icons.blur_on) 21 | }); 22 | 23 | @override 24 | _ColorLoader5State createState() => _ColorLoader5State(); 25 | } 26 | 27 | class _ColorLoader5State extends State 28 | with SingleTickerProviderStateMixin { 29 | late Animation animation_1; 30 | late Animation animation_2; 31 | late Animation animation_3; 32 | late AnimationController controller; 33 | 34 | @override 35 | void initState() { 36 | super.initState(); 37 | 38 | controller = AnimationController( 39 | duration: widget.duration, vsync: this); 40 | 41 | animation_1 = Tween(begin: 0.0, end: 1.0).animate( 42 | CurvedAnimation( 43 | parent: controller, 44 | curve: Interval(0.0, 0.70, curve: Curves.linear), 45 | ), 46 | ); 47 | 48 | animation_2 = Tween(begin: 0.0, end: 1.0).animate( 49 | CurvedAnimation( 50 | parent: controller, 51 | curve: Interval(0.1, 0.80, curve: Curves.linear), 52 | ), 53 | ); 54 | 55 | animation_3 = Tween(begin: 0.0, end: 1.0).animate( 56 | CurvedAnimation( 57 | parent: controller, 58 | curve: Interval(0.2, 0.90, curve: Curves.linear), 59 | ), 60 | ); 61 | 62 | controller.addListener(() { 63 | setState(() { 64 | //print(animation_1.value); 65 | }); 66 | }); 67 | 68 | controller.repeat(); 69 | } 70 | 71 | @override 72 | Widget build(BuildContext context) { 73 | //print(animation_1.value <= 0.4 ? 2.5 * animation_1.value : (animation_1.value > 0.40 && animation_1.value <= 0.60) ? 1.0 : 2.5 - (2.5 * animation_1.value)); 74 | return Container( 75 | child: new Row( 76 | mainAxisAlignment: MainAxisAlignment.center, 77 | children: [ 78 | Opacity( 79 | opacity: (animation_1.value <= 0.4 ? 2.5 * animation_1.value : (animation_1.value > 0.40 && animation_1.value <= 0.60) ? 1.0 : 2.5 - (2.5 * animation_1.value)), 80 | child: new Padding( 81 | padding: const EdgeInsets.only(right: 8.0), 82 | child: Dot( 83 | radius: 10.0, 84 | color: widget.dotOneColor, 85 | type: widget.dotType, 86 | icon: widget.dotIcon, 87 | ), 88 | ), 89 | ), 90 | Opacity( 91 | opacity: (animation_2.value <= 0.4 ? 2.5 * animation_2.value : (animation_2.value > 0.40 && animation_2.value <= 0.60)? 1.0 : 2.5 - (2.5 * animation_2.value)), 92 | child: new Padding( 93 | padding: const EdgeInsets.only(right: 8.0), 94 | child: Dot( 95 | radius: 10.0, 96 | color: widget.dotTwoColor, 97 | type: widget.dotType, 98 | icon: widget.dotIcon, 99 | ), 100 | ), 101 | ), 102 | Opacity( 103 | opacity: (animation_3.value <= 0.4 ? 2.5 * animation_3.value : (animation_3.value > 0.40 && animation_3.value <= 0.60) ? 1.0 : 2.5 - (2.5 * animation_3.value)), 104 | child: new Padding( 105 | padding: const EdgeInsets.only(right: 8.0), 106 | child: Dot( 107 | radius: 10.0, 108 | color: widget.dotThreeColor, 109 | type: widget.dotType, 110 | icon: widget.dotIcon, 111 | ), 112 | ), 113 | ), 114 | ], 115 | ), 116 | ); 117 | } 118 | 119 | @override 120 | void dispose() { 121 | 122 | controller.dispose(); 123 | super.dispose(); 124 | } 125 | } 126 | 127 | class Dot extends StatelessWidget { 128 | final double? radius; 129 | final Color? color; 130 | final DotType? type; 131 | final Icon? icon; 132 | 133 | Dot({this.radius, this.color, this.type, this.icon}); 134 | 135 | @override 136 | Widget build(BuildContext context) { 137 | return new Center( 138 | child: type == DotType.icon ? 139 | Icon(icon!.icon, color: color, size: 1.3 * radius!,) 140 | : new Transform.rotate( 141 | angle: type == DotType.diamond ? pi/4 : 0.0, 142 | child: Container( 143 | width: radius, 144 | height: radius, 145 | decoration: BoxDecoration(color: color, shape: type == DotType.circle? BoxShape.circle : BoxShape.rectangle), 146 | ), 147 | ), 148 | ); 149 | } 150 | } 151 | -------------------------------------------------------------------------------- /lib/loaders/dot_type.dart: -------------------------------------------------------------------------------- 1 | enum DotType { 2 | square, circle, diamond, icon 3 | } -------------------------------------------------------------------------------- /lib/loaders/flip_loader.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'dart:math'; 3 | 4 | class FlipLoader extends StatefulWidget { 5 | final Color loaderBackground; 6 | final Color iconColor; 7 | final IconData icon; 8 | final String animationType; 9 | final String shape; 10 | final bool rotateIcon; 11 | 12 | FlipLoader({this.loaderBackground = Colors.redAccent, this.iconColor = Colors.white, this.icon = Icons.sync, this.animationType = "full_flip", this.shape = "square", this.rotateIcon = true}); 13 | 14 | 15 | @override 16 | _FlipLoaderState createState() => _FlipLoaderState(this.loaderBackground, this.iconColor, this.icon, this.animationType, this.shape, this.rotateIcon); 17 | } 18 | 19 | class _FlipLoaderState extends State 20 | with SingleTickerProviderStateMixin { 21 | 22 | late AnimationController controller; 23 | late Animation rotationHorizontal; 24 | late Animation rotationVertical; 25 | late Color loaderColor; 26 | late Color iconColor; 27 | late IconData icon; 28 | late Widget loaderIconChild; 29 | late String animationType; 30 | late String shape; 31 | late bool rotateIcon; 32 | 33 | _FlipLoaderState(this.loaderColor, this.iconColor, this.icon, this.animationType, this.shape, this.rotateIcon); 34 | 35 | @override 36 | void initState() { 37 | super.initState(); 38 | 39 | controller = createAnimationController(animationType); 40 | 41 | controller.addStatusListener((status){ 42 | // Play animation backwards and forwards for full flip 43 | if (animationType == "half_flip") { 44 | if (status == AnimationStatus.completed) { 45 | setState(() { 46 | controller.repeat(); 47 | }); 48 | } 49 | } 50 | // play animation on repeat for half flip 51 | else if (animationType == "full_flip") { 52 | if (status == AnimationStatus.dismissed) { 53 | setState(() { 54 | controller.forward(); 55 | }); 56 | } 57 | if (status == AnimationStatus.completed) { 58 | setState(() { 59 | controller.repeat(); 60 | }); 61 | } 62 | } 63 | // custom animation state 64 | else { 65 | print("TODO not sure yet"); 66 | } 67 | }); 68 | 69 | controller.forward(); 70 | } 71 | 72 | AnimationController createAnimationController([String type = 'full_flip']) { 73 | AnimationController animCtrl; 74 | 75 | switch(type) { 76 | case "half_flip": 77 | animCtrl = AnimationController(duration: const Duration(milliseconds: 4000), vsync: this); 78 | 79 | // Horizontal animation 80 | this.rotationHorizontal = Tween(begin: 0.0, end: 1.0).animate( 81 | CurvedAnimation( 82 | parent: animCtrl, 83 | curve: Interval(0.0, 0.50, curve: Curves.linear))); 84 | 85 | // Vertical animation 86 | this.rotationVertical = Tween(begin: 0.0, end: 1.0).animate( 87 | CurvedAnimation( 88 | parent: animCtrl, 89 | curve: Interval(0.50, 1.0, curve: Curves.linear))); 90 | break; 91 | case "full_flip": 92 | default: 93 | animCtrl = AnimationController(duration: const Duration(milliseconds: 2000), vsync: this); 94 | 95 | this.rotationHorizontal = Tween(begin: 0.0, end: 1.0).animate( 96 | CurvedAnimation( 97 | parent: animCtrl, 98 | curve: Interval(0.0, 0.50, curve: Curves.linear))); 99 | this.rotationVertical = Tween(begin: 0.0, end: 1.0).animate( 100 | CurvedAnimation( 101 | parent: animCtrl, 102 | curve: Interval(0.50, 1.0, curve: Curves.linear))); 103 | break; 104 | } 105 | 106 | return animCtrl; 107 | } 108 | 109 | @override 110 | Widget build(BuildContext context) { 111 | if (animationType == "half_flip") { 112 | return buildHalfFlipper(context); 113 | } else { 114 | return buildFullFlipper(context); 115 | } 116 | } 117 | 118 | Widget buildHalfFlipper(BuildContext context) { 119 | return new AnimatedBuilder( 120 | animation: controller, 121 | builder: (BuildContext context, Widget? child) { 122 | return Container( 123 | child: new Transform( 124 | transform: Matrix4.identity() 125 | ..setEntry(3, 2, 0.006) 126 | ..rotateX(sin(2*pi * rotationVertical.value)) 127 | ..rotateY(sin(2*pi * rotationHorizontal.value)), 128 | alignment: Alignment.center, 129 | child: Container( 130 | decoration: BoxDecoration( 131 | shape: shape == "circle" ? BoxShape.circle : BoxShape.rectangle, 132 | borderRadius: shape == "circle" ? null : new BorderRadius.all(const Radius.circular(8.0)), 133 | color: loaderColor, 134 | ), 135 | width: 40.0, 136 | height: 40.0, 137 | child: rotateIcon == true ? new RotationTransition( 138 | turns: rotationHorizontal.value == 1.0 ? rotationVertical : rotationHorizontal, 139 | child: new Center( 140 | child: Icon( 141 | icon, 142 | color: iconColor, 143 | size: 20.0, 144 | ), 145 | ), 146 | ) : Center( 147 | child: Icon( 148 | icon, 149 | color: iconColor, 150 | size: 20.0, 151 | ), 152 | ) 153 | ), 154 | ), 155 | ); 156 | }, 157 | ); 158 | } 159 | 160 | Widget buildFullFlipper(BuildContext context) { 161 | return new AnimatedBuilder( 162 | animation: controller, 163 | builder: (BuildContext context, Widget? child) { 164 | return Container( 165 | child: new Transform( 166 | transform: Matrix4.identity() 167 | ..setEntry(3, 2, 0.006) 168 | ..rotateX((2* pi * rotationVertical.value)) 169 | ..rotateY((2* pi * rotationHorizontal.value)), 170 | alignment: Alignment.center, 171 | child: Container( 172 | decoration: BoxDecoration( 173 | shape: shape == "circle" ? BoxShape.circle : BoxShape.rectangle, 174 | borderRadius: shape == "circle" ? null : new BorderRadius.all(const Radius.circular(8.0)), 175 | color: loaderColor, 176 | ), 177 | width: 40.0, 178 | height: 40.0, 179 | child: new Center( 180 | child: Icon( 181 | icon, color: iconColor, size: 20.0, 182 | ), 183 | ), 184 | ), 185 | ), 186 | ); 187 | }, 188 | ); 189 | } 190 | } 191 | -------------------------------------------------------------------------------- /lib/login_screen_1.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/cupertino.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class LoginScreen1 extends StatelessWidget { 5 | final Color? primaryColor; 6 | final Color? backgroundColor; 7 | final AssetImage backgroundImage; 8 | 9 | LoginScreen1({ 10 | Key? key, 11 | this.primaryColor = Colors.green, 12 | this.backgroundColor = Colors.white, 13 | this.backgroundImage = const AssetImage("assets/images/full-bloom.png"), 14 | }); 15 | 16 | @override 17 | Widget build(BuildContext context) { 18 | return Scaffold( 19 | body: SingleChildScrollView( 20 | child: new Container( 21 | height: MediaQuery.of(context).size.height, 22 | decoration: BoxDecoration( 23 | color: this.backgroundColor, 24 | ), 25 | child: Column( 26 | crossAxisAlignment: CrossAxisAlignment.start, 27 | mainAxisSize: MainAxisSize.max, 28 | children: [ 29 | Expanded( 30 | child: new ClipPath( 31 | clipper: MyClipper(), 32 | child: Container( 33 | decoration: BoxDecoration( 34 | image: new DecorationImage( 35 | image: this.backgroundImage, 36 | fit: BoxFit.cover, 37 | ), 38 | ), 39 | alignment: Alignment.center, 40 | padding: EdgeInsets.only(top: 100.0, bottom: 100.0), 41 | child: Column( 42 | children: [ 43 | Text( 44 | "DEMO", 45 | style: TextStyle(fontSize: 50.0, fontWeight: FontWeight.bold, color: this.primaryColor), 46 | ), 47 | Text( 48 | "Login Screen 1", 49 | style: TextStyle(fontSize: 20.0, fontWeight: FontWeight.bold, color: this.primaryColor), 50 | ), 51 | ], 52 | ), 53 | ), 54 | ), 55 | ), 56 | Padding( 57 | padding: const EdgeInsets.only(left: 40.0), 58 | child: Text( 59 | "Email", 60 | style: TextStyle(color: Colors.grey, fontSize: 16.0), 61 | ), 62 | ), 63 | Container( 64 | decoration: BoxDecoration( 65 | border: Border.all( 66 | color: Colors.grey.withOpacity(0.5), 67 | width: 1.0, 68 | ), 69 | borderRadius: BorderRadius.circular(20.0), 70 | ), 71 | margin: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), 72 | child: Row( 73 | children: [ 74 | new Padding( 75 | padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0), 76 | child: Icon( 77 | Icons.person_outline, 78 | color: Colors.grey, 79 | ), 80 | ), 81 | Container( 82 | height: 30.0, 83 | width: 1.0, 84 | color: Colors.grey.withOpacity(0.5), 85 | margin: const EdgeInsets.only(left: 00.0, right: 10.0), 86 | ), 87 | new Expanded( 88 | child: TextField( 89 | decoration: InputDecoration( 90 | border: InputBorder.none, 91 | hintText: 'Enter your email', 92 | hintStyle: TextStyle(color: Colors.grey), 93 | ), 94 | ), 95 | ) 96 | ], 97 | ), 98 | ), 99 | Padding( 100 | padding: const EdgeInsets.only(left: 40.0), 101 | child: Text( 102 | "Password", 103 | style: TextStyle(color: Colors.grey, fontSize: 16.0), 104 | ), 105 | ), 106 | Container( 107 | decoration: BoxDecoration( 108 | border: Border.all( 109 | color: Colors.grey.withOpacity(0.5), 110 | width: 1.0, 111 | ), 112 | borderRadius: BorderRadius.circular(20.0), 113 | ), 114 | margin: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 20.0), 115 | child: Row( 116 | children: [ 117 | new Padding( 118 | padding: EdgeInsets.symmetric(vertical: 10.0, horizontal: 15.0), 119 | child: Icon( 120 | Icons.lock_open, 121 | color: Colors.grey, 122 | ), 123 | ), 124 | Container( 125 | height: 30.0, 126 | width: 1.0, 127 | color: Colors.grey.withOpacity(0.5), 128 | margin: const EdgeInsets.only(left: 00.0, right: 10.0), 129 | ), 130 | new Expanded( 131 | child: TextField( 132 | decoration: InputDecoration( 133 | border: InputBorder.none, 134 | hintText: 'Enter your password', 135 | hintStyle: TextStyle(color: Colors.grey), 136 | ), 137 | ), 138 | ) 139 | ], 140 | ), 141 | ), 142 | Container( 143 | margin: const EdgeInsets.only(top: 20.0), 144 | padding: const EdgeInsets.only(left: 20.0, right: 20.0), 145 | child: new Row( 146 | children: [ 147 | new Expanded( 148 | child: FlatButton( 149 | shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)), 150 | splashColor: this.primaryColor, 151 | color: this.primaryColor, 152 | child: new Row( 153 | children: [ 154 | new Padding( 155 | padding: const EdgeInsets.only(left: 20.0), 156 | child: Text( 157 | "LOGIN", 158 | style: TextStyle(color: Colors.white), 159 | ), 160 | ), 161 | new Expanded( 162 | child: Container(), 163 | ), 164 | new Transform.translate( 165 | offset: Offset(15.0, 0.0), 166 | child: new Container( 167 | padding: const EdgeInsets.all(5.0), 168 | child: FlatButton( 169 | shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(28.0)), 170 | splashColor: Colors.white, 171 | color: Colors.white, 172 | child: Icon( 173 | Icons.arrow_forward, 174 | color: this.primaryColor, 175 | ), 176 | onPressed: () => {}, 177 | ), 178 | ), 179 | ) 180 | ], 181 | ), 182 | onPressed: () => {}, 183 | ), 184 | ), 185 | ], 186 | ), 187 | ), 188 | Container( 189 | margin: const EdgeInsets.only(top: 10.0), 190 | padding: const EdgeInsets.only(left: 20.0, right: 20.0), 191 | child: new Row( 192 | children: [ 193 | new Expanded( 194 | child: FlatButton( 195 | shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)), 196 | splashColor: Color(0xFF3B5998), 197 | color: Color(0xff3B5998), 198 | child: new Row( 199 | children: [ 200 | new Padding( 201 | padding: const EdgeInsets.only(left: 20.0), 202 | child: Text( 203 | "LOGIN WITH FACEBOOK", 204 | style: TextStyle(color: Colors.white), 205 | ), 206 | ), 207 | new Expanded( 208 | child: Container(), 209 | ), 210 | new Transform.translate( 211 | offset: Offset(15.0, 0.0), 212 | child: new Container( 213 | padding: const EdgeInsets.all(5.0), 214 | child: FlatButton( 215 | shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(28.0)), 216 | splashColor: Colors.white, 217 | color: Colors.white, 218 | child: Icon( 219 | const IconData(0xea90, fontFamily: 'icomoon'), 220 | color: Color(0xff3b5998), 221 | ), 222 | onPressed: () => {}, 223 | ), 224 | ), 225 | ) 226 | ], 227 | ), 228 | onPressed: () => {}, 229 | ), 230 | ), 231 | ], 232 | ), 233 | ), 234 | Container( 235 | margin: const EdgeInsets.only(top: 20.0), 236 | padding: const EdgeInsets.only(left: 20.0, right: 20.0), 237 | child: new Row( 238 | children: [ 239 | new Expanded( 240 | child: FlatButton( 241 | shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)), 242 | color: Colors.transparent, 243 | child: Container( 244 | padding: const EdgeInsets.only(left: 20.0), 245 | alignment: Alignment.center, 246 | child: Text( 247 | "DON'T HAVE AN ACCOUNT?", 248 | style: TextStyle(color: this.primaryColor), 249 | ), 250 | ), 251 | onPressed: () => {}, 252 | ), 253 | ), 254 | ], 255 | ), 256 | ), 257 | ], 258 | ), 259 | ), 260 | ), 261 | ); 262 | } 263 | } 264 | 265 | class MyClipper extends CustomClipper { 266 | @override 267 | Path getClip(Size size) { 268 | Path p = new Path(); 269 | p.lineTo(size.width, 0.0); 270 | p.lineTo(size.width, size.height * 0.85); 271 | p.arcToPoint( 272 | Offset(0.0, size.height * 0.85), 273 | radius: const Radius.elliptical(50.0, 10.0), 274 | rotation: 0.0, 275 | ); 276 | p.lineTo(0.0, 0.0); 277 | p.close(); 278 | return p; 279 | } 280 | 281 | @override 282 | bool shouldReclip(CustomClipper oldClipper) { 283 | return true; 284 | } 285 | } 286 | -------------------------------------------------------------------------------- /lib/login_screen_2.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class LoginScreen2 extends StatelessWidget { 4 | final Color? backgroundColor1; 5 | final Color? backgroundColor2; 6 | final Color? highlightColor; 7 | final Color? foregroundColor; 8 | final AssetImage? logo; 9 | 10 | LoginScreen2({ 11 | Key? k, 12 | this.backgroundColor1 = const Color(0xFF444152), 13 | this.backgroundColor2 = const Color(0xFF6f6c7d), 14 | this.highlightColor = const Color(0xfff65aa3), 15 | this.foregroundColor = Colors.white, 16 | this.logo = const AssetImage("assets/images/full-bloom.png"), 17 | }); 18 | 19 | @override 20 | Widget build(BuildContext context) { 21 | return Scaffold( 22 | body: SingleChildScrollView( 23 | child: Container( 24 | decoration: new BoxDecoration( 25 | gradient: new LinearGradient( 26 | begin: Alignment.centerLeft, 27 | end: new Alignment(1.0, 0.0), // 10% of the width, so there are ten blinds. 28 | colors: [this.backgroundColor1!, this.backgroundColor2!], // whitish to gray 29 | tileMode: TileMode.repeated, // repeats the gradient over the canvas 30 | ), 31 | ), 32 | height: MediaQuery.of(context).size.height, 33 | child: Column( 34 | children: [ 35 | Container( 36 | padding: const EdgeInsets.only(top: 110.0, bottom: 50.0), 37 | child: Center( 38 | child: new Column( 39 | children: [ 40 | Container( 41 | height: 128.0, 42 | width: 128.0, 43 | child: new CircleAvatar( 44 | backgroundColor: Colors.transparent, 45 | foregroundColor: this.foregroundColor, 46 | radius: 100.0, 47 | child: new Text( 48 | "S", 49 | style: TextStyle( 50 | fontSize: 50.0, 51 | fontWeight: FontWeight.w100, 52 | ), 53 | ), 54 | ), 55 | decoration: BoxDecoration( 56 | border: Border.all( 57 | color: this.foregroundColor!, 58 | width: 1.0, 59 | ), 60 | shape: BoxShape.circle, 61 | //image: DecorationImage(image: this.logo) 62 | ), 63 | ), 64 | new Padding( 65 | padding: const EdgeInsets.all(16.0), 66 | child: new Text( 67 | "Samarth Agarwal", 68 | style: TextStyle(color: this.foregroundColor), 69 | ), 70 | ) 71 | ], 72 | ), 73 | ), 74 | ), 75 | new Container( 76 | width: MediaQuery.of(context).size.width, 77 | margin: const EdgeInsets.only(left: 40.0, right: 40.0), 78 | alignment: Alignment.center, 79 | decoration: BoxDecoration( 80 | border: Border( 81 | bottom: BorderSide(color: this.foregroundColor!, width: 0.5, style: BorderStyle.solid), 82 | ), 83 | ), 84 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 85 | child: new Row( 86 | crossAxisAlignment: CrossAxisAlignment.center, 87 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 88 | children: [ 89 | new Padding( 90 | padding: EdgeInsets.only(top: 10.0, bottom: 10.0, right: 00.0), 91 | child: Icon( 92 | Icons.alternate_email, 93 | color: this.foregroundColor, 94 | ), 95 | ), 96 | new Expanded( 97 | child: TextField( 98 | textAlign: TextAlign.center, 99 | decoration: InputDecoration( 100 | border: InputBorder.none, 101 | hintText: 'samarthagarwal@live.com', 102 | hintStyle: TextStyle(color: this.foregroundColor), 103 | ), 104 | ), 105 | ), 106 | ], 107 | ), 108 | ), 109 | new Container( 110 | width: MediaQuery.of(context).size.width, 111 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 112 | alignment: Alignment.center, 113 | decoration: BoxDecoration( 114 | border: Border( 115 | bottom: BorderSide(color: this.foregroundColor!, width: 0.5, style: BorderStyle.solid), 116 | ), 117 | ), 118 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 119 | child: new Row( 120 | crossAxisAlignment: CrossAxisAlignment.center, 121 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 122 | children: [ 123 | new Padding( 124 | padding: EdgeInsets.only(top: 10.0, bottom: 10.0, right: 00.0), 125 | child: Icon( 126 | Icons.lock_open, 127 | color: this.foregroundColor, 128 | ), 129 | ), 130 | new Expanded( 131 | child: TextField( 132 | obscureText: true, 133 | textAlign: TextAlign.center, 134 | decoration: InputDecoration( 135 | border: InputBorder.none, 136 | hintText: '*********', 137 | hintStyle: TextStyle(color: this.foregroundColor), 138 | ), 139 | ), 140 | ), 141 | ], 142 | ), 143 | ), 144 | new Container( 145 | width: MediaQuery.of(context).size.width, 146 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 30.0), 147 | alignment: Alignment.center, 148 | child: new Row( 149 | children: [ 150 | new Expanded( 151 | child: new FlatButton( 152 | padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0), 153 | color: this.highlightColor, 154 | onPressed: () => {}, 155 | child: Text( 156 | "Log In", 157 | style: TextStyle(color: this.foregroundColor), 158 | ), 159 | ), 160 | ), 161 | ], 162 | ), 163 | ), 164 | new Container( 165 | width: MediaQuery.of(context).size.width, 166 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 167 | alignment: Alignment.center, 168 | child: new Row( 169 | children: [ 170 | new Expanded( 171 | child: new FlatButton( 172 | padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0), 173 | color: Colors.transparent, 174 | onPressed: () => {}, 175 | child: Text( 176 | "Forgot your password?", 177 | style: TextStyle(color: this.foregroundColor!.withOpacity(0.5)), 178 | ), 179 | ), 180 | ), 181 | ], 182 | ), 183 | ), 184 | new Expanded( 185 | child: Divider(), 186 | ), 187 | new Container( 188 | width: MediaQuery.of(context).size.width, 189 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0, bottom: 20.0), 190 | alignment: Alignment.center, 191 | child: new Row( 192 | children: [ 193 | new Expanded( 194 | child: new FlatButton( 195 | padding: const EdgeInsets.symmetric(vertical: 20.0, horizontal: 20.0), 196 | color: Colors.transparent, 197 | onPressed: () => {}, 198 | child: Text( 199 | "Don't have an account? Create One", 200 | style: TextStyle(color: this.foregroundColor!.withOpacity(0.5)), 201 | ), 202 | ), 203 | ), 204 | ], 205 | ), 206 | ), 207 | ], 208 | ), 209 | ), 210 | ), 211 | ); 212 | } 213 | } 214 | -------------------------------------------------------------------------------- /lib/login_screen_3.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class LoginScreen3 extends StatefulWidget { 4 | @override 5 | _LoginScreen3State createState() => new _LoginScreen3State(); 6 | } 7 | 8 | class _LoginScreen3State extends State 9 | with TickerProviderStateMixin { 10 | 11 | //The code is commented because instead of manual scrolling with animation, 12 | //Now PageView is being used 13 | 14 | /*double scrollPercent = 0.0; 15 | Offset startDrag; 16 | double startDragPercentScroll; 17 | double dragDirection; // -1 for left, +1 for right 18 | 19 | AnimationController controller_minus1To0; 20 | AnimationController controller_0To1; 21 | CurvedAnimation anim_minus1To0; 22 | CurvedAnimation anim_0To1; 23 | 24 | final numCards = 3; 25 | 26 | void _onHorizontalDragStart(DragStartDetails details) { 27 | startDrag = details.globalPosition; 28 | startDragPercentScroll = scrollPercent; 29 | } 30 | 31 | void _onHorizontalDragUpdate(DragUpdateDetails details) { 32 | final currDrag = details.globalPosition; 33 | final dragDistance = currDrag.dx - startDrag.dx; 34 | if (dragDistance > 0) { 35 | dragDirection = 1.0; 36 | } else { 37 | dragDirection = -1.0; 38 | } 39 | final singleCardDragPercent = dragDistance / context.size.width; 40 | 41 | setState(() { 42 | scrollPercent = 43 | (startDragPercentScroll + (-singleCardDragPercent / numCards)) 44 | .clamp(0.0 - (1 / numCards), (1 / numCards)); 45 | print(scrollPercent); 46 | }); 47 | } 48 | 49 | void _onHorizontalDragEnd(DragEndDetails details) { 50 | if (scrollPercent > 0.1666) { 51 | print("FIRST CASE"); 52 | controller_0To1.forward(from: scrollPercent * numCards); 53 | } else if (scrollPercent < 0.1666 && 54 | scrollPercent > -0.1666 && 55 | dragDirection == -1.0) { 56 | print("SECOND CASE"); 57 | controller_0To1.reverse(from: scrollPercent * numCards); 58 | } else if (scrollPercent < 0.1666 && 59 | scrollPercent > -0.1666 && 60 | dragDirection == 1.0) { 61 | print("THIRD CASE"); 62 | controller_minus1To0.forward(from: scrollPercent * numCards); 63 | } else if (scrollPercent < -0.1666) { 64 | print("LAST CASE"); 65 | controller_minus1To0.reverse(from: scrollPercent * numCards); 66 | } 67 | 68 | setState(() { 69 | startDrag = null; 70 | startDragPercentScroll = null; 71 | }); 72 | } 73 | */ 74 | 75 | @override 76 | void initState() { 77 | super.initState(); 78 | 79 | //The code is commented because instead of manual scrolling with animation, 80 | //Now PageView is being used 81 | 82 | /* 83 | controller_minus1To0 = new AnimationController( 84 | vsync: this, 85 | duration: const Duration(milliseconds: 500), 86 | lowerBound: -1.0, 87 | upperBound: 0.0, 88 | ); 89 | controller_0To1 = new AnimationController( 90 | vsync: this, 91 | duration: const Duration(milliseconds: 500), 92 | lowerBound: 0.0, 93 | upperBound: 1.0, 94 | ); 95 | 96 | anim_minus1To0 = new CurvedAnimation( 97 | parent: controller_minus1To0, 98 | curve: Interval(0.10, 0.90, curve: Curves.bounceInOut), 99 | ); 100 | anim_0To1 = new CurvedAnimation( 101 | parent: controller_0To1, 102 | curve: Interval(0.10, 0.90, curve: Curves.bounceInOut), 103 | ); 104 | 105 | anim_0To1.addListener(() { 106 | scrollPercent = controller_0To1.value / numCards; 107 | // print(scrollPercent); 108 | setState(() {}); 109 | }); 110 | 111 | anim_minus1To0.addListener(() { 112 | scrollPercent = controller_minus1To0.value / numCards; 113 | // print(scrollPercent); 114 | setState(() {}); 115 | }); 116 | */ 117 | } 118 | 119 | Widget HomePage() { 120 | return new Container( 121 | height: MediaQuery.of(context).size.height, 122 | decoration: BoxDecoration( 123 | color: Colors.redAccent, 124 | image: DecorationImage( 125 | colorFilter: new ColorFilter.mode( 126 | Colors.black.withOpacity(0.1), BlendMode.dstATop), 127 | image: AssetImage('assets/images/mountains.jpg'), 128 | fit: BoxFit.cover, 129 | ), 130 | ), 131 | child: new Column( 132 | children: [ 133 | Container( 134 | padding: EdgeInsets.only(top: 250.0), 135 | child: Center( 136 | child: Icon( 137 | Icons.headset_mic, 138 | color: Colors.white, 139 | size: 40.0, 140 | ), 141 | ), 142 | ), 143 | Container( 144 | padding: EdgeInsets.only(top: 20.0), 145 | child: new Row( 146 | mainAxisAlignment: MainAxisAlignment.center, 147 | children: [ 148 | Text( 149 | "Awesome", 150 | style: TextStyle( 151 | color: Colors.white, 152 | fontSize: 20.0, 153 | ), 154 | ), 155 | Text( 156 | "App", 157 | style: TextStyle( 158 | color: Colors.white, 159 | fontSize: 20.0, 160 | fontWeight: FontWeight.bold), 161 | ), 162 | ], 163 | ), 164 | ), 165 | new Container( 166 | width: MediaQuery.of(context).size.width, 167 | margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 150.0), 168 | alignment: Alignment.center, 169 | child: new Row( 170 | children: [ 171 | new Expanded( 172 | child: new OutlineButton( 173 | shape: new RoundedRectangleBorder( 174 | borderRadius: new BorderRadius.circular(30.0)), 175 | color: Colors.redAccent, 176 | highlightedBorderColor: Colors.white, 177 | onPressed: () => gotoSignup(), 178 | child: new Container( 179 | padding: const EdgeInsets.symmetric( 180 | vertical: 20.0, 181 | horizontal: 20.0, 182 | ), 183 | child: new Row( 184 | mainAxisAlignment: MainAxisAlignment.center, 185 | children: [ 186 | new Expanded( 187 | child: Text( 188 | "SIGN UP", 189 | textAlign: TextAlign.center, 190 | style: TextStyle( 191 | color: Colors.white, 192 | fontWeight: FontWeight.bold), 193 | ), 194 | ), 195 | ], 196 | ), 197 | ), 198 | ), 199 | ), 200 | ], 201 | ), 202 | ), 203 | new Container( 204 | width: MediaQuery.of(context).size.width, 205 | margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 30.0), 206 | alignment: Alignment.center, 207 | child: new Row( 208 | children: [ 209 | new Expanded( 210 | child: new FlatButton( 211 | shape: new RoundedRectangleBorder( 212 | borderRadius: new BorderRadius.circular(30.0)), 213 | color: Colors.white, 214 | onPressed: () => gotoLogin(), 215 | child: new Container( 216 | padding: const EdgeInsets.symmetric( 217 | vertical: 20.0, 218 | horizontal: 20.0, 219 | ), 220 | child: new Row( 221 | mainAxisAlignment: MainAxisAlignment.center, 222 | children: [ 223 | new Expanded( 224 | child: Text( 225 | "LOGIN", 226 | textAlign: TextAlign.center, 227 | style: TextStyle( 228 | color: Colors.redAccent, 229 | fontWeight: FontWeight.bold), 230 | ), 231 | ), 232 | ], 233 | ), 234 | ), 235 | ), 236 | ), 237 | ], 238 | ), 239 | ), 240 | ], 241 | ), 242 | ); 243 | } 244 | 245 | Widget LoginPage() { 246 | return new Container( 247 | height: MediaQuery.of(context).size.height, 248 | decoration: BoxDecoration( 249 | color: Colors.white, 250 | image: DecorationImage( 251 | colorFilter: new ColorFilter.mode( 252 | Colors.black.withOpacity(0.05), BlendMode.dstATop), 253 | image: AssetImage('assets/images/mountains.jpg'), 254 | fit: BoxFit.cover, 255 | ), 256 | ), 257 | child: new Column( 258 | children: [ 259 | Container( 260 | padding: EdgeInsets.all(100.0), 261 | child: Center( 262 | child: Icon( 263 | Icons.headset_mic, 264 | color: Colors.redAccent, 265 | size: 50.0, 266 | ), 267 | ), 268 | ), 269 | new Row( 270 | children: [ 271 | new Expanded( 272 | child: new Padding( 273 | padding: const EdgeInsets.only(left: 40.0), 274 | child: new Text( 275 | "EMAIL", 276 | style: TextStyle( 277 | fontWeight: FontWeight.bold, 278 | color: Colors.redAccent, 279 | fontSize: 15.0, 280 | ), 281 | ), 282 | ), 283 | ), 284 | ], 285 | ), 286 | new Container( 287 | width: MediaQuery.of(context).size.width, 288 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 289 | alignment: Alignment.center, 290 | decoration: BoxDecoration( 291 | border: Border( 292 | bottom: BorderSide( 293 | color: Colors.redAccent, 294 | width: 0.5, 295 | style: BorderStyle.solid), 296 | ), 297 | ), 298 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 299 | child: new Row( 300 | crossAxisAlignment: CrossAxisAlignment.center, 301 | mainAxisAlignment: MainAxisAlignment.start, 302 | children: [ 303 | new Expanded( 304 | child: TextField( 305 | obscureText: true, 306 | textAlign: TextAlign.left, 307 | decoration: InputDecoration( 308 | border: InputBorder.none, 309 | hintText: 'samarthagarwal@live.com', 310 | hintStyle: TextStyle(color: Colors.grey), 311 | ), 312 | ), 313 | ), 314 | ], 315 | ), 316 | ), 317 | Divider( 318 | height: 24.0, 319 | ), 320 | new Row( 321 | children: [ 322 | new Expanded( 323 | child: new Padding( 324 | padding: const EdgeInsets.only(left: 40.0), 325 | child: new Text( 326 | "PASSWORD", 327 | style: TextStyle( 328 | fontWeight: FontWeight.bold, 329 | color: Colors.redAccent, 330 | fontSize: 15.0, 331 | ), 332 | ), 333 | ), 334 | ), 335 | ], 336 | ), 337 | new Container( 338 | width: MediaQuery.of(context).size.width, 339 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 340 | alignment: Alignment.center, 341 | decoration: BoxDecoration( 342 | border: Border( 343 | bottom: BorderSide( 344 | color: Colors.redAccent, 345 | width: 0.5, 346 | style: BorderStyle.solid), 347 | ), 348 | ), 349 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 350 | child: new Row( 351 | crossAxisAlignment: CrossAxisAlignment.center, 352 | mainAxisAlignment: MainAxisAlignment.start, 353 | children: [ 354 | new Expanded( 355 | child: TextField( 356 | obscureText: true, 357 | textAlign: TextAlign.left, 358 | decoration: InputDecoration( 359 | border: InputBorder.none, 360 | hintText: '*********', 361 | hintStyle: TextStyle(color: Colors.grey), 362 | ), 363 | ), 364 | ), 365 | ], 366 | ), 367 | ), 368 | Divider( 369 | height: 24.0, 370 | ), 371 | new Row( 372 | mainAxisAlignment: MainAxisAlignment.end, 373 | children: [ 374 | Padding( 375 | padding: const EdgeInsets.only(right: 20.0), 376 | child: new FlatButton( 377 | child: new Text( 378 | "Forgot Password?", 379 | style: TextStyle( 380 | fontWeight: FontWeight.bold, 381 | color: Colors.redAccent, 382 | fontSize: 15.0, 383 | ), 384 | textAlign: TextAlign.end, 385 | ), 386 | onPressed: () => {}, 387 | ), 388 | ), 389 | ], 390 | ), 391 | new Container( 392 | width: MediaQuery.of(context).size.width, 393 | margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 10.0), 394 | alignment: Alignment.center, 395 | child: new Row( 396 | children: [ 397 | new Expanded( 398 | child: new FlatButton( 399 | shape: new RoundedRectangleBorder( 400 | borderRadius: new BorderRadius.circular(30.0), 401 | ), 402 | color: Colors.redAccent, 403 | onPressed: () => {}, 404 | child: new Container( 405 | padding: const EdgeInsets.symmetric( 406 | vertical: 20.0, 407 | horizontal: 20.0, 408 | ), 409 | child: new Row( 410 | mainAxisAlignment: MainAxisAlignment.center, 411 | children: [ 412 | new Expanded( 413 | child: Text( 414 | "LOGIN", 415 | textAlign: TextAlign.center, 416 | style: TextStyle( 417 | color: Colors.white, 418 | fontWeight: FontWeight.bold), 419 | ), 420 | ), 421 | ], 422 | ), 423 | ), 424 | ), 425 | ), 426 | ], 427 | ), 428 | ), 429 | new Container( 430 | width: MediaQuery.of(context).size.width, 431 | margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 10.0), 432 | alignment: Alignment.center, 433 | child: Row( 434 | children: [ 435 | new Expanded( 436 | child: new Container( 437 | margin: EdgeInsets.all(8.0), 438 | decoration: BoxDecoration(border: Border.all(width: 0.25)), 439 | ), 440 | ), 441 | Text( 442 | "OR CONNECT WITH", 443 | style: TextStyle( 444 | color: Colors.grey, 445 | fontWeight: FontWeight.bold, 446 | ), 447 | ), 448 | new Expanded( 449 | child: new Container( 450 | margin: EdgeInsets.all(8.0), 451 | decoration: BoxDecoration(border: Border.all(width: 0.25)), 452 | ), 453 | ), 454 | ], 455 | ), 456 | ), 457 | new Container( 458 | width: MediaQuery.of(context).size.width, 459 | margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 20.0), 460 | child: new Row( 461 | children: [ 462 | new Expanded( 463 | child: new Container( 464 | margin: EdgeInsets.only(right: 8.0), 465 | alignment: Alignment.center, 466 | child: new Row( 467 | children: [ 468 | new Expanded( 469 | child: new FlatButton( 470 | shape: new RoundedRectangleBorder( 471 | borderRadius: new BorderRadius.circular(30.0), 472 | ), 473 | color: Color(0Xff3B5998), 474 | onPressed: () => {}, 475 | child: new Container( 476 | child: new Row( 477 | mainAxisAlignment: MainAxisAlignment.center, 478 | children: [ 479 | new Expanded( 480 | child: new FlatButton( 481 | onPressed: ()=>{}, 482 | padding: EdgeInsets.only( 483 | top: 20.0, 484 | bottom: 20.0, 485 | ), 486 | child: new Row( 487 | mainAxisAlignment: 488 | MainAxisAlignment.spaceEvenly, 489 | children: [ 490 | Icon( 491 | const IconData(0xea90, 492 | fontFamily: 'icomoon'), 493 | color: Colors.white, 494 | size: 15.0, 495 | ), 496 | Text( 497 | "FACEBOOK", 498 | textAlign: TextAlign.center, 499 | style: TextStyle( 500 | color: Colors.white, 501 | fontWeight: FontWeight.bold), 502 | ), 503 | ], 504 | ), 505 | ), 506 | ), 507 | ], 508 | ), 509 | ), 510 | ), 511 | ), 512 | ], 513 | ), 514 | ), 515 | ), 516 | new Expanded( 517 | child: new Container( 518 | margin: EdgeInsets.only(left: 8.0), 519 | alignment: Alignment.center, 520 | child: new Row( 521 | children: [ 522 | new Expanded( 523 | child: new FlatButton( 524 | shape: new RoundedRectangleBorder( 525 | borderRadius: new BorderRadius.circular(30.0), 526 | ), 527 | color: Color(0Xffdb3236), 528 | onPressed: () => {}, 529 | child: new Container( 530 | child: new Row( 531 | mainAxisAlignment: MainAxisAlignment.center, 532 | children: [ 533 | new Expanded( 534 | child: new FlatButton( 535 | onPressed: ()=>{}, 536 | padding: EdgeInsets.only( 537 | top: 20.0, 538 | bottom: 20.0, 539 | ), 540 | child: new Row( 541 | mainAxisAlignment: 542 | MainAxisAlignment.spaceEvenly, 543 | children: [ 544 | Icon( 545 | const IconData(0xea88, 546 | fontFamily: 'icomoon'), 547 | color: Colors.white, 548 | size: 15.0, 549 | ), 550 | Text( 551 | "GOOGLE", 552 | textAlign: TextAlign.center, 553 | style: TextStyle( 554 | color: Colors.white, 555 | fontWeight: FontWeight.bold), 556 | ), 557 | ], 558 | ), 559 | ), 560 | ), 561 | ], 562 | ), 563 | ), 564 | ), 565 | ), 566 | ], 567 | ), 568 | ), 569 | ), 570 | ], 571 | ), 572 | ) 573 | ], 574 | ), 575 | ); 576 | } 577 | 578 | Widget SignupPage() { 579 | return SingleChildScrollView( 580 | child: new Container( 581 | height: MediaQuery.of(context).size.height, 582 | decoration: BoxDecoration( 583 | color: Colors.white, 584 | image: DecorationImage( 585 | colorFilter: new ColorFilter.mode( 586 | Colors.black.withOpacity(0.05), BlendMode.dstATop), 587 | image: AssetImage('assets/images/mountains.jpg'), 588 | fit: BoxFit.cover, 589 | ), 590 | ), 591 | child: new Column( 592 | children: [ 593 | Container( 594 | padding: EdgeInsets.all(100.0), 595 | child: Center( 596 | child: Icon( 597 | Icons.headset_mic, 598 | color: Colors.redAccent, 599 | size: 50.0, 600 | ), 601 | ), 602 | ), 603 | new Row( 604 | children: [ 605 | new Expanded( 606 | child: new Padding( 607 | padding: const EdgeInsets.only(left: 40.0), 608 | child: new Text( 609 | "EMAIL", 610 | style: TextStyle( 611 | fontWeight: FontWeight.bold, 612 | color: Colors.redAccent, 613 | fontSize: 15.0, 614 | ), 615 | ), 616 | ), 617 | ), 618 | ], 619 | ), 620 | new Container( 621 | width: MediaQuery.of(context).size.width, 622 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 623 | alignment: Alignment.center, 624 | decoration: BoxDecoration( 625 | border: Border( 626 | bottom: BorderSide( 627 | color: Colors.redAccent, 628 | width: 0.5, 629 | style: BorderStyle.solid), 630 | ), 631 | ), 632 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 633 | child: new Row( 634 | crossAxisAlignment: CrossAxisAlignment.center, 635 | mainAxisAlignment: MainAxisAlignment.start, 636 | children: [ 637 | new Expanded( 638 | child: TextField( 639 | obscureText: true, 640 | textAlign: TextAlign.left, 641 | decoration: InputDecoration( 642 | border: InputBorder.none, 643 | hintText: 'samarthagarwal@live.com', 644 | hintStyle: TextStyle(color: Colors.grey), 645 | ), 646 | ), 647 | ), 648 | ], 649 | ), 650 | ), 651 | 652 | Divider( 653 | height: 24.0, 654 | ), 655 | 656 | new Row( 657 | children: [ 658 | new Expanded( 659 | child: new Padding( 660 | padding: const EdgeInsets.only(left: 40.0), 661 | child: new Text( 662 | "PASSWORD", 663 | style: TextStyle( 664 | fontWeight: FontWeight.bold, 665 | color: Colors.redAccent, 666 | fontSize: 15.0, 667 | ), 668 | ), 669 | ), 670 | ), 671 | ], 672 | ), 673 | new Container( 674 | width: MediaQuery.of(context).size.width, 675 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 676 | alignment: Alignment.center, 677 | decoration: BoxDecoration( 678 | border: Border( 679 | bottom: BorderSide( 680 | color: Colors.redAccent, 681 | width: 0.5, 682 | style: BorderStyle.solid), 683 | ), 684 | ), 685 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 686 | child: new Row( 687 | crossAxisAlignment: CrossAxisAlignment.center, 688 | mainAxisAlignment: MainAxisAlignment.start, 689 | children: [ 690 | new Expanded( 691 | child: TextField( 692 | obscureText: true, 693 | textAlign: TextAlign.left, 694 | decoration: InputDecoration( 695 | border: InputBorder.none, 696 | hintText: '*********', 697 | hintStyle: TextStyle(color: Colors.grey), 698 | ), 699 | ), 700 | ), 701 | ], 702 | ), 703 | ), 704 | Divider( 705 | height: 24.0, 706 | ), 707 | new Row( 708 | children: [ 709 | new Expanded( 710 | child: new Padding( 711 | padding: const EdgeInsets.only(left: 40.0), 712 | child: new Text( 713 | "CONFIRM PASSWORD", 714 | style: TextStyle( 715 | fontWeight: FontWeight.bold, 716 | color: Colors.redAccent, 717 | fontSize: 15.0, 718 | ), 719 | ), 720 | ), 721 | ), 722 | ], 723 | ), 724 | new Container( 725 | width: MediaQuery.of(context).size.width, 726 | margin: const EdgeInsets.only(left: 40.0, right: 40.0, top: 10.0), 727 | alignment: Alignment.center, 728 | decoration: BoxDecoration( 729 | border: Border( 730 | bottom: BorderSide( 731 | color: Colors.redAccent, 732 | width: 0.5, 733 | style: BorderStyle.solid), 734 | ), 735 | ), 736 | padding: const EdgeInsets.only(left: 0.0, right: 10.0), 737 | child: new Row( 738 | crossAxisAlignment: CrossAxisAlignment.center, 739 | mainAxisAlignment: MainAxisAlignment.start, 740 | children: [ 741 | new Expanded( 742 | child: TextField( 743 | obscureText: true, 744 | textAlign: TextAlign.left, 745 | decoration: InputDecoration( 746 | border: InputBorder.none, 747 | hintText: '*********', 748 | hintStyle: TextStyle(color: Colors.grey), 749 | ), 750 | ), 751 | ), 752 | ], 753 | ), 754 | ), 755 | Divider( 756 | height: 24.0, 757 | ), 758 | new Row( 759 | mainAxisAlignment: MainAxisAlignment.end, 760 | children: [ 761 | Padding( 762 | padding: const EdgeInsets.only(right: 20.0), 763 | child: new FlatButton( 764 | child: new Text( 765 | "Already have an account?", 766 | style: TextStyle( 767 | fontWeight: FontWeight.bold, 768 | color: Colors.redAccent, 769 | fontSize: 15.0, 770 | ), 771 | textAlign: TextAlign.end, 772 | ), 773 | onPressed: () => {}, 774 | ), 775 | ), 776 | ], 777 | ), 778 | new Container( 779 | width: MediaQuery.of(context).size.width, 780 | margin: const EdgeInsets.only(left: 30.0, right: 30.0, top: 10.0), 781 | alignment: Alignment.center, 782 | child: new Row( 783 | children: [ 784 | new Expanded( 785 | child: new FlatButton( 786 | shape: new RoundedRectangleBorder( 787 | borderRadius: new BorderRadius.circular(30.0), 788 | ), 789 | color: Colors.redAccent, 790 | onPressed: () => {}, 791 | child: new Container( 792 | padding: const EdgeInsets.symmetric( 793 | vertical: 20.0, 794 | horizontal: 20.0, 795 | ), 796 | child: new Row( 797 | mainAxisAlignment: MainAxisAlignment.center, 798 | children: [ 799 | new Expanded( 800 | child: Text( 801 | "SIGN UP", 802 | textAlign: TextAlign.center, 803 | style: TextStyle( 804 | color: Colors.white, 805 | fontWeight: FontWeight.bold), 806 | ), 807 | ), 808 | ], 809 | ), 810 | ), 811 | ), 812 | ), 813 | ], 814 | ), 815 | ), 816 | ], 817 | ), 818 | ), 819 | ); 820 | } 821 | 822 | gotoLogin() { 823 | //controller_0To1.forward(from: 0.0); 824 | _controller.animateToPage( 825 | 0, 826 | duration: Duration(milliseconds: 800), 827 | curve: Curves.bounceOut, 828 | ); 829 | } 830 | 831 | gotoSignup() { 832 | //controller_minus1To0.reverse(from: 0.0); 833 | _controller.animateToPage( 834 | 2, 835 | duration: Duration(milliseconds: 800), 836 | curve: Curves.bounceOut, 837 | ); 838 | } 839 | 840 | PageController _controller = new PageController(initialPage: 1, viewportFraction: 1.0); 841 | 842 | @override 843 | Widget build(BuildContext context) { 844 | return Container( 845 | height: MediaQuery.of(context).size.height, 846 | // child: new GestureDetector( 847 | // onHorizontalDragStart: _onHorizontalDragStart, 848 | // onHorizontalDragUpdate: _onHorizontalDragUpdate, 849 | // onHorizontalDragEnd: _onHorizontalDragEnd, 850 | // behavior: HitTestBehavior.translucent, 851 | // child: Stack( 852 | // children: [ 853 | // new FractionalTranslation( 854 | // translation: Offset(-1 - (scrollPercent / (1 / numCards)), 0.0), 855 | // child: SignupPage(), 856 | // ), 857 | // new FractionalTranslation( 858 | // translation: Offset(0 - (scrollPercent / (1 / numCards)), 0.0), 859 | // child: HomePage(), 860 | // ), 861 | // new FractionalTranslation( 862 | // translation: Offset(1 - (scrollPercent / (1 / numCards)), 0.0), 863 | // child: LoginPage(), 864 | // ), 865 | // ], 866 | // ), 867 | // ), 868 | child: PageView( 869 | controller: _controller, 870 | physics: new AlwaysScrollableScrollPhysics(), 871 | children: [LoginPage(), HomePage(), SignupPage()], 872 | scrollDirection: Axis.horizontal, 873 | )); 874 | } 875 | } 876 | -------------------------------------------------------------------------------- /lib/login_screen_4.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class LoginScreen4 extends StatefulWidget { 4 | final Color primaryColor; 5 | final Color secondaryColor; 6 | final Color logoGreen; 7 | LoginScreen4({ 8 | this.primaryColor = const Color(0xFF990000), 9 | this.secondaryColor = const Color(0xFFEEEEEE), 10 | this.logoGreen = const Color(0xFF0000FF), 11 | }); 12 | @override 13 | _LoginScreen4State createState() => _LoginScreen4State(); 14 | } 15 | 16 | class _LoginScreen4State extends State { 17 | TextEditingController _emailController = TextEditingController(); 18 | TextEditingController _passwordController = TextEditingController(); 19 | FocusNode? myFocusNode; 20 | 21 | @override 22 | void initState() { 23 | super.initState(); 24 | myFocusNode = FocusNode(); 25 | } 26 | 27 | @override 28 | void dispose() { 29 | myFocusNode?.dispose(); 30 | super.dispose(); 31 | } 32 | 33 | @override 34 | Widget build(BuildContext context) { 35 | return Scaffold( 36 | backgroundColor: widget.primaryColor, 37 | appBar: AppBar( 38 | backgroundColor: Colors.transparent, 39 | elevation: 0, 40 | ), 41 | body: Container( 42 | alignment: Alignment.topCenter, 43 | margin: EdgeInsets.symmetric(horizontal: 30), 44 | child: SingleChildScrollView( 45 | child: Column( 46 | mainAxisAlignment: MainAxisAlignment.center, 47 | crossAxisAlignment: CrossAxisAlignment.center, 48 | children: [ 49 | Text( 50 | 'Login To Continue!', 51 | textAlign: TextAlign.center, 52 | style: TextStyle(color: Colors.white, fontSize: 28), 53 | ), 54 | SizedBox(height: 20), 55 | Text( 56 | 'Enter your email and password below to continue and be a part of our project!', 57 | textAlign: TextAlign.center, 58 | style: TextStyle(color: Colors.white, fontSize: 14), 59 | ), 60 | SizedBox( 61 | height: 50, 62 | ), 63 | Container( 64 | padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5), 65 | decoration: BoxDecoration(color: widget.secondaryColor, border: Border.all(color: Colors.blue)), 66 | child: TextFormField( 67 | controller: _emailController, 68 | style: TextStyle(color: Colors.white), 69 | decoration: InputDecoration( 70 | contentPadding: EdgeInsets.symmetric(horizontal: 10), 71 | labelText: "Email", 72 | labelStyle: TextStyle(color: Colors.white), 73 | icon: Icon( 74 | Icons.email, 75 | color: Colors.white, 76 | ), 77 | border: InputBorder.none, 78 | ), 79 | keyboardType: TextInputType.emailAddress, 80 | textInputAction: TextInputAction.next, 81 | onFieldSubmitted: (_) => myFocusNode?.requestFocus(), 82 | ), 83 | ), 84 | SizedBox(height: 20), 85 | Container( 86 | padding: EdgeInsets.symmetric(horizontal: 10, vertical: 5), 87 | decoration: BoxDecoration(color: widget.secondaryColor, border: Border.all(color: Colors.blue)), 88 | child: TextFormField( 89 | focusNode: myFocusNode, 90 | controller: _passwordController, 91 | style: TextStyle(color: Colors.white), 92 | decoration: InputDecoration( 93 | contentPadding: EdgeInsets.symmetric(horizontal: 10), 94 | labelText: "Password", 95 | labelStyle: TextStyle(color: Colors.white), 96 | icon: Icon( 97 | Icons.lock, 98 | color: Colors.white, 99 | ), 100 | border: InputBorder.none, 101 | ), 102 | obscureText: true, 103 | ), 104 | ), 105 | SizedBox(height: 30), 106 | MaterialButton( 107 | elevation: 0, 108 | minWidth: double.maxFinite, 109 | height: 50, 110 | onPressed: () {}, 111 | color: widget.logoGreen, 112 | child: Text('Login', style: TextStyle(color: Colors.white, fontSize: 16)), 113 | textColor: Colors.white, 114 | ), 115 | SizedBox(height: 20), 116 | MaterialButton( 117 | elevation: 0, 118 | minWidth: double.maxFinite, 119 | height: 50, 120 | onPressed: () {}, 121 | color: Colors.blue, 122 | child: Row( 123 | mainAxisAlignment: MainAxisAlignment.center, 124 | children: [ 125 | Text('Sign In using Google', style: TextStyle(color: Colors.white, fontSize: 16)), 126 | ], 127 | ), 128 | textColor: Colors.white, 129 | ), 130 | SizedBox(height: 100), 131 | Align( 132 | alignment: Alignment.bottomCenter, 133 | child: Row( 134 | mainAxisAlignment: MainAxisAlignment.center, 135 | children: [ 136 | GestureDetector( 137 | onTap: () {}, 138 | child: Text('Sign Up?', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 20, fontWeight: FontWeight.bold)), 139 | ), 140 | ], 141 | ), 142 | ) 143 | ], 144 | ), 145 | ), 146 | ), 147 | ); 148 | } 149 | } 150 | -------------------------------------------------------------------------------- /lib/login_screen_5.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class LoginScreen5 extends StatefulWidget { 4 | final String avatarImage; 5 | final void Function() onLoginClick; 6 | final void Function() googleSignIn; 7 | final void Function() navigatePage; 8 | LoginScreen5({ 9 | required this.avatarImage, 10 | required this.onLoginClick, 11 | required this.googleSignIn, 12 | required this.navigatePage, 13 | }); 14 | @override 15 | _LoginScreen5State createState() => _LoginScreen5State(); 16 | } 17 | 18 | class _LoginScreen5State extends State { 19 | TextEditingController emailController = TextEditingController(); 20 | TextEditingController passwordController = TextEditingController(); 21 | 22 | @override 23 | Widget build(BuildContext context) { 24 | return Scaffold( 25 | resizeToAvoidBottomInset: false, 26 | body: Stack( 27 | children: [ 28 | Container( 29 | width: double.infinity, 30 | height: MediaQuery.of(context).size.height, 31 | decoration: BoxDecoration( 32 | image: DecorationImage(image: AssetImage('assets/images/signin_page_background.png'), fit: BoxFit.fill), 33 | ), 34 | ), 35 | Container( 36 | margin: EdgeInsets.only(top: 120), 37 | decoration: BoxDecoration( 38 | color: Color.fromRGBO(53, 55, 88, 1), 39 | borderRadius: BorderRadius.only( 40 | topLeft: Radius.circular(37.5), 41 | topRight: Radius.circular(37.5), 42 | ), 43 | ), 44 | child: Container( 45 | margin: EdgeInsets.only(top: 90), 46 | child: Column( 47 | mainAxisAlignment: MainAxisAlignment.start, 48 | children: [ 49 | Text( 50 | "Welcome Back", 51 | style: TextStyle(fontSize: 17, color: Color.fromRGBO(147, 148, 184, 1), fontWeight: FontWeight.bold), 52 | ), 53 | SizedBox(height: 30), 54 | Container( 55 | margin: EdgeInsets.only(top: 22.5, right: 22.5, left: 22.5), 56 | child: TextField( 57 | controller: emailController, 58 | cursorColor: Colors.white, 59 | decoration: InputDecoration( 60 | enabledBorder: UnderlineInputBorder(borderSide: BorderSide(color: Color.fromRGBO(90, 90, 90, 1))), 61 | icon: Icon( 62 | Icons.email, 63 | color: Colors.white, 64 | ), 65 | contentPadding: EdgeInsets.all(11.25), 66 | hintText: "Email", 67 | hintStyle: TextStyle( 68 | color: Colors.white, 69 | ), 70 | ), 71 | ), 72 | ), 73 | Container( 74 | margin: EdgeInsets.only(top: 22.5, right: 22.5, left: 22.5), 75 | child: TextField( 76 | controller: passwordController, 77 | cursorColor: Colors.white, 78 | decoration: InputDecoration( 79 | enabledBorder: UnderlineInputBorder( 80 | borderSide: BorderSide( 81 | color: Color.fromRGBO(90, 90, 90, 1), 82 | ), 83 | ), 84 | icon: Icon(Icons.lock, color: Colors.white), 85 | contentPadding: EdgeInsets.all(11.25), 86 | hintText: "Password", 87 | hintStyle: TextStyle( 88 | color: Colors.white, 89 | ), 90 | ), 91 | obscureText: true, 92 | ), 93 | ), 94 | Container( 95 | width: MediaQuery.of(context).size.width, 96 | height: 60, 97 | margin: EdgeInsets.only(top: 40, left: 30, right: 30), 98 | child: ElevatedButton( 99 | style: ButtonStyle( 100 | backgroundColor: MaterialStateProperty.all( 101 | Color.fromRGBO(255, 87, 34, 1), 102 | ), 103 | shape: MaterialStateProperty.all( 104 | RoundedRectangleBorder( 105 | borderRadius: BorderRadius.circular(30), 106 | ), 107 | ), 108 | ), 109 | onPressed: widget.onLoginClick, 110 | child: Text( 111 | "Log in", 112 | style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold), 113 | ), 114 | ), 115 | ), 116 | Container( 117 | width: MediaQuery.of(context).size.width, 118 | height: 60, 119 | margin: EdgeInsets.only(top: 20, right: 30, left: 30), 120 | child: TextButton( 121 | style: ButtonStyle( 122 | // backgroundColor: MaterialStateProperty.all( 123 | // Colors.transparent, 124 | // ), 125 | shape: MaterialStateProperty.all( 126 | RoundedRectangleBorder( 127 | borderRadius: BorderRadius.circular(30), 128 | ), 129 | ), 130 | ), 131 | onPressed: widget.googleSignIn, 132 | child: Text( 133 | "Sign In With Google", 134 | style: TextStyle( 135 | color: Colors.white, 136 | fontSize: 17, 137 | fontWeight: FontWeight.bold, 138 | ), 139 | ), 140 | ), 141 | ), 142 | Expanded( 143 | child: Container( 144 | margin: EdgeInsets.only(top: 60), 145 | width: double.infinity, 146 | decoration: BoxDecoration( 147 | color: Colors.white, 148 | borderRadius: BorderRadius.only( 149 | topLeft: Radius.circular(40), 150 | topRight: Radius.circular(40), 151 | ), 152 | ), 153 | child: Column( 154 | children: [ 155 | IconButton(icon: Icon(Icons.keyboard_arrow_up), onPressed: widget.navigatePage), 156 | Text( 157 | "Sign up", 158 | style: TextStyle(fontSize: 17, fontWeight: FontWeight.bold), 159 | ), 160 | ], 161 | ), 162 | ), 163 | ), 164 | ], 165 | ), 166 | ), 167 | ), 168 | Container( 169 | margin: EdgeInsets.only( 170 | left: MediaQuery.of(context).size.width / 2 - 50, 171 | top: MediaQuery.of(context).size.height / 10.1, 172 | ), 173 | child: CircleAvatar( 174 | radius: 50, 175 | backgroundImage: AssetImage(widget.avatarImage), 176 | ), 177 | ), 178 | ], 179 | ), 180 | ); 181 | } 182 | } 183 | -------------------------------------------------------------------------------- /lib/login_screen_6.dart: -------------------------------------------------------------------------------- 1 | import "package:flutter/material.dart"; 2 | 3 | class LoginScreen6 extends StatefulWidget { 4 | final void Function() onLoginClick; 5 | final void Function() navigatePage; 6 | LoginScreen6({ 7 | required this.onLoginClick, 8 | required this.navigatePage, 9 | }); 10 | @override 11 | _LoginScreen6State createState() => _LoginScreen6State(); 12 | } 13 | 14 | class _LoginScreen6State extends State { 15 | final TextEditingController emailController = TextEditingController(); 16 | final TextEditingController passwordController = TextEditingController(); 17 | @override 18 | Widget build(BuildContext context) { 19 | return Scaffold( 20 | body: SingleChildScrollView( 21 | child: Stack( 22 | children: [ 23 | Container( 24 | height: MediaQuery.of(context).size.height, 25 | width: MediaQuery.of(context).size.width, 26 | decoration: BoxDecoration( 27 | image: DecorationImage( 28 | image: AssetImage("assets/images/background_image_one_signin.png"), 29 | fit: BoxFit.fill, 30 | ), 31 | ), 32 | ), 33 | Column( 34 | crossAxisAlignment: CrossAxisAlignment.start, 35 | children: [ 36 | Container( 37 | margin: EdgeInsets.only(left: 40, right: 8, top: 155), 38 | child: Text( 39 | "Welcome\nBack", 40 | style: TextStyle(color: Colors.white, fontSize: 30, fontWeight: FontWeight.bold), 41 | ), 42 | ), 43 | Padding( 44 | padding: const EdgeInsets.all(15.0), 45 | child: Container( 46 | margin: EdgeInsets.only(left: 30, right: 30, top: MediaQuery.of(context).size.height * 0.24), 47 | width: double.infinity, 48 | child: TextField( 49 | controller: emailController, 50 | style: TextStyle(color: Color.fromRGBO(41, 41, 41, 1)), 51 | decoration: InputDecoration( 52 | hintText: "Email", 53 | hintStyle: TextStyle(color: Color.fromRGBO(121, 121, 121, 1)), 54 | ), 55 | keyboardType: TextInputType.emailAddress, 56 | ), 57 | ), 58 | ), 59 | Padding( 60 | padding: const EdgeInsets.all(15.0), 61 | child: Container( 62 | margin: EdgeInsets.only(left: 30, right: 30), 63 | width: double.infinity, 64 | child: TextField( 65 | controller: passwordController, 66 | style: TextStyle(color: Color.fromRGBO(41, 41, 41, 1)), 67 | decoration: InputDecoration( 68 | hintText: "Password", 69 | hintStyle: TextStyle(color: Color.fromRGBO(121, 121, 121, 1)), 70 | ), 71 | keyboardType: TextInputType.emailAddress, 72 | obscureText: true, 73 | ), 74 | ), 75 | ), 76 | Row( 77 | children: [ 78 | Padding( 79 | padding: const EdgeInsets.all(50), 80 | child: Text( 81 | "Sign in", 82 | style: TextStyle( 83 | color: Colors.black, 84 | fontSize: 25, 85 | fontWeight: FontWeight.bold, 86 | ), 87 | ), 88 | ), 89 | Container( 90 | margin: EdgeInsets.only(left: 120), 91 | child: ClipOval( 92 | child: Material( 93 | color: Color.fromRGBO(78, 82, 91, 1), 94 | child: InkWell( 95 | child: SizedBox( 96 | width: 56, 97 | height: 56, 98 | child: Icon( 99 | Icons.arrow_right, 100 | color: Colors.white, 101 | ), 102 | ), 103 | onTap: widget.onLoginClick, 104 | ), 105 | ), 106 | )) 107 | ], 108 | ), 109 | SizedBox(height: MediaQuery.of(context).size.height * 0.014), 110 | Padding( 111 | padding: const EdgeInsets.only(left: 40.0), 112 | child: TextButton( 113 | child: Text( 114 | "Sign up", 115 | style: TextStyle( 116 | color: Colors.black, 117 | fontWeight: FontWeight.bold, 118 | decoration: TextDecoration.underline, 119 | fontSize: 15, 120 | ), 121 | ), 122 | onPressed: widget.navigatePage, 123 | ), 124 | ), 125 | ], 126 | ), 127 | ], 128 | ), 129 | ), 130 | ); 131 | } 132 | } 133 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'login_screen_1.dart'; 4 | 5 | void main() => runApp(new MyApp()); 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return new MaterialApp( 11 | title: 'Flutter Login Screen 1', 12 | theme: new ThemeData( 13 | primarySwatch: Colors.blue, 14 | ), 15 | home: MyHomePage(), 16 | debugShowCheckedModeBanner: false, 17 | ); 18 | } 19 | } 20 | 21 | class MyHomePage extends StatefulWidget { 22 | @override 23 | _MyHomePageState createState() => new _MyHomePageState(); 24 | } 25 | 26 | class _MyHomePageState extends State { 27 | @override 28 | Widget build(BuildContext context) { 29 | return Scaffold( 30 | backgroundColor: Colors.white, 31 | body: LoginScreen1(), 32 | ); 33 | } 34 | 35 | Container buildPage(Color color, String text) { 36 | return Container( 37 | color: color, 38 | child: Center( 39 | child: Text( 40 | text, 41 | style: TextStyle( 42 | fontSize: 50.0, 43 | color: Colors.white, 44 | ), 45 | ), 46 | ), 47 | ); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /lib/misc/rating.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Rating extends StatefulWidget { 4 | final int? initialRating; 5 | final void Function(int)? onRated; 6 | final double size; 7 | final Color color; 8 | 9 | Rating( 10 | {this.initialRating, 11 | this.onRated, 12 | this.size = 18.0, 13 | this.color = Colors.amber}); 14 | 15 | @override 16 | _RatingState createState() => _RatingState(); 17 | } 18 | 19 | class _RatingState extends State { 20 | int _rating = 0; 21 | GlobalKey _starOneKey = GlobalKey(); 22 | GlobalKey _starTwoKey = GlobalKey(); 23 | GlobalKey _starThreeKey = GlobalKey(); 24 | GlobalKey _starFourKey = GlobalKey(); 25 | GlobalKey _starFiveKey = GlobalKey(); 26 | bool _isDragging = false; 27 | 28 | _updateRating(int newRating) { 29 | if (_rating == 1 && newRating == 1 && _isDragging != true) { 30 | setState(() { 31 | _rating = 0; 32 | widget.onRated!(0); 33 | }); 34 | } else { 35 | setState(() { 36 | _rating = newRating; 37 | widget.onRated!(newRating); 38 | }); 39 | } 40 | } 41 | 42 | @override 43 | void initState() { 44 | super.initState(); 45 | _rating = widget.initialRating!; 46 | } 47 | 48 | @override 49 | Widget build(BuildContext context) { 50 | return GestureDetector( 51 | onHorizontalDragStart: (DragStartDetails details) { 52 | _isDragging = true; 53 | }, 54 | onHorizontalDragUpdate: (DragUpdateDetails details) { 55 | RenderBox? star1 = _starOneKey.currentContext!.findRenderObject() as RenderBox?; 56 | final Offset positionStar1 = star1!.localToGlobal(Offset.zero); 57 | final sizeStar1 = star1.size; 58 | 59 | RenderBox? star2 = _starTwoKey.currentContext!.findRenderObject() as RenderBox?; 60 | final positionStar2 = star2!.localToGlobal(Offset.zero); 61 | final sizeStar2 = star2.size; 62 | 63 | RenderBox? star3 = _starThreeKey.currentContext!.findRenderObject() as RenderBox?; 64 | final positionStar3 = star3!.localToGlobal(Offset.zero); 65 | final sizeStar3 = star3.size; 66 | 67 | RenderBox? star4 = _starFourKey.currentContext!.findRenderObject() as RenderBox?; 68 | final positionStar4 = star4!.localToGlobal(Offset.zero); 69 | final sizeStar4 = star4.size; 70 | 71 | RenderBox? star5 = _starFiveKey.currentContext!.findRenderObject() as RenderBox?; 72 | final positionStar5 = star5!.localToGlobal(Offset.zero); 73 | final sizeStar5 = star5.size; 74 | 75 | if (details.globalPosition.dx < positionStar1.dx) { 76 | print(details.globalPosition.dx.toString() + 77 | " " + 78 | positionStar1.dx.toString()); 79 | _updateRating(0); 80 | } else if (details.globalPosition.dx > positionStar1.dx && 81 | details.globalPosition.dx < (positionStar1.dx + sizeStar1.width)) { 82 | _updateRating(1); 83 | } else if (details.globalPosition.dx > positionStar2.dx && 84 | details.globalPosition.dx < (positionStar2.dx + sizeStar2.width)) { 85 | _updateRating(2); 86 | } else if (details.globalPosition.dx > positionStar3.dx && 87 | details.globalPosition.dx < (positionStar3.dx + sizeStar3.width)) { 88 | _updateRating(3); 89 | } else if (details.globalPosition.dx > positionStar4.dx && 90 | details.globalPosition.dx < (positionStar4.dx + sizeStar4.width)) { 91 | _updateRating(4); 92 | } else if (details.globalPosition.dx > positionStar5.dx && 93 | details.globalPosition.dx < (positionStar5.dx + sizeStar5.width)) { 94 | _updateRating(5); 95 | } else if (details.globalPosition.dx > 96 | (positionStar1.dx + sizeStar1.width)) { 97 | _updateRating(5); 98 | } 99 | }, 100 | onHorizontalDragEnd: (DragEndDetails details) { 101 | _isDragging = false; 102 | }, 103 | child: Row( 104 | mainAxisAlignment: MainAxisAlignment.center, 105 | children: [ 106 | GestureDetector( 107 | key: _starOneKey, 108 | child: Padding( 109 | padding: const EdgeInsets.symmetric(horizontal: 3.0), 110 | child: Icon( 111 | _rating >= 1 ? Icons.star : Icons.star_border, 112 | color: widget.color, 113 | size: widget.size, 114 | ), 115 | ), 116 | onTap: () => _updateRating(1), 117 | ), 118 | GestureDetector( 119 | key: _starTwoKey, 120 | child: Padding( 121 | padding: const EdgeInsets.symmetric(horizontal: 3.0), 122 | child: Icon( 123 | _rating >= 2 ? Icons.star : Icons.star_border, 124 | color: widget.color, 125 | size: widget.size, 126 | ), 127 | ), 128 | onTap: () => _updateRating(2), 129 | ), 130 | GestureDetector( 131 | key: _starThreeKey, 132 | child: Padding( 133 | padding: const EdgeInsets.symmetric(horizontal: 3.0), 134 | child: Icon( 135 | _rating >= 3 ? Icons.star : Icons.star_border, 136 | color: widget.color, 137 | size: widget.size, 138 | ), 139 | ), 140 | onTap: () => _updateRating(3), 141 | ), 142 | GestureDetector( 143 | key: _starFourKey, 144 | child: Padding( 145 | padding: const EdgeInsets.symmetric(horizontal: 3.0), 146 | child: Icon( 147 | _rating >= 4 ? Icons.star : Icons.star_border, 148 | color: widget.color, 149 | size: widget.size, 150 | ), 151 | ), 152 | onTap: () => _updateRating(4), 153 | ), 154 | GestureDetector( 155 | key: _starFiveKey, 156 | child: Padding( 157 | padding: const EdgeInsets.symmetric(horizontal: 3.0), 158 | child: Icon( 159 | _rating >= 5 ? Icons.star : Icons.star_border, 160 | color: widget.color, 161 | size: widget.size, 162 | ), 163 | ), 164 | onTap: () => _updateRating(5), 165 | ), 166 | ], 167 | ), 168 | ); 169 | } 170 | } 171 | -------------------------------------------------------------------------------- /lib/misc/slide_list_view.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | import 'package:flutter/material.dart'; 3 | 4 | class SlideListView extends StatefulWidget { 5 | final Widget? view1; 6 | final Widget? view2; 7 | final String? defaultView; 8 | final Duration duration; 9 | final bool enabledSwipe; 10 | final Color floatingActionButtonColor; 11 | final bool showFloatingActionButton; 12 | final AnimatedIconData floatingActionButtonIcon; 13 | 14 | SlideListView({ 15 | this.view1, 16 | this.view2, 17 | this.defaultView = "slides", 18 | this.floatingActionButtonColor = Colors.blue, 19 | this.showFloatingActionButton = true, 20 | this.enabledSwipe = false, 21 | this.floatingActionButtonIcon = AnimatedIcons.view_list, 22 | this.duration = const Duration( 23 | milliseconds: 400, 24 | ), 25 | }); 26 | 27 | @override 28 | _SlideListViewState createState() => _SlideListViewState(); 29 | } 30 | 31 | class _SlideListViewState extends State 32 | with SingleTickerProviderStateMixin { 33 | late AnimationController _animationController; 34 | PageController _mainPageController = PageController(); 35 | double currentPageValue = 0.0; 36 | double _viewportFraction = 0.95; 37 | String _currentView = "slides"; 38 | 39 | @override 40 | void initState() { 41 | super.initState(); 42 | currentPageValue = 0.0; 43 | _viewportFraction = 0.95; 44 | if (widget.defaultView == null) { 45 | _currentView = "slides"; 46 | } else { 47 | _currentView = "list"; 48 | } 49 | _mainPageController = PageController(initialPage: 0, viewportFraction: 1.0); 50 | _mainPageController.addListener(() { 51 | setState(() { 52 | currentPageValue = _mainPageController.page!; 53 | }); 54 | }); 55 | _animationController = AnimationController( 56 | vsync: this, 57 | duration: widget.duration, 58 | ); 59 | } 60 | 61 | @override 62 | Widget build(BuildContext context) { 63 | return Scaffold( 64 | body: Stack( 65 | children: [ 66 | PageView.builder( 67 | physics: widget.enabledSwipe 68 | ? AlwaysScrollableScrollPhysics() 69 | : NeverScrollableScrollPhysics(), 70 | controller: _mainPageController, 71 | onPageChanged: (int newPage) { 72 | if (newPage == 0) { 73 | _currentView = "slides"; 74 | } else { 75 | _currentView = "list"; 76 | } 77 | }, 78 | itemCount: 2, 79 | itemBuilder: (ctx, index) { 80 | if (index == 0) { 81 | return Transform( 82 | transform: Matrix4.identity() 83 | ..setEntry(3, 2, 0.0005) 84 | ..rotateY((currentPageValue - index) * sqrt(2)), 85 | origin: currentPageValue <= index 86 | ? Offset(0, 0) 87 | : Offset( 88 | MediaQuery.of(ctx).size.width * _viewportFraction, 0), 89 | child: widget.view1, 90 | ); 91 | } else { 92 | // the following code won't work as long as itemCount is set to 1 93 | return Transform( 94 | transform: Matrix4.identity() 95 | ..setEntry(3, 2, 0.0005) 96 | ..rotateY((currentPageValue - index) * sqrt(2)), 97 | origin: currentPageValue <= index 98 | ? Offset(0, 0) 99 | : Offset( 100 | MediaQuery.of(ctx).size.width * _viewportFraction, 0), 101 | child: widget.view2, 102 | ); 103 | } 104 | }, 105 | ), 106 | if (widget.showFloatingActionButton) 107 | Positioned( 108 | bottom: 8.0, 109 | right: 8.0, 110 | child: CircleAvatar( 111 | backgroundColor: widget.floatingActionButtonColor, 112 | child: IconButton( 113 | icon: AnimatedIcon( 114 | icon: widget.floatingActionButtonIcon, 115 | progress: _animationController, 116 | color: Colors.white, 117 | ), 118 | onPressed: () { 119 | if (_currentView == "slides") { 120 | _animationController.forward(); 121 | 122 | _mainPageController.animateToPage(1, 123 | duration: widget.duration, curve: Curves.easeIn); 124 | } else { 125 | _animationController.reverse(); 126 | _mainPageController.animateToPage(0, 127 | duration: widget.duration, curve: Curves.easeIn); 128 | } 129 | }, 130 | ), 131 | ), 132 | ), 133 | ], 134 | ), 135 | ); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | async: 5 | dependency: transitive 6 | description: 7 | name: async 8 | url: "https://pub.dartlang.org" 9 | source: hosted 10 | version: "2.5.0" 11 | boolean_selector: 12 | dependency: transitive 13 | description: 14 | name: boolean_selector 15 | url: "https://pub.dartlang.org" 16 | source: hosted 17 | version: "2.1.0" 18 | characters: 19 | dependency: transitive 20 | description: 21 | name: characters 22 | url: "https://pub.dartlang.org" 23 | source: hosted 24 | version: "1.1.0" 25 | charcode: 26 | dependency: transitive 27 | description: 28 | name: charcode 29 | url: "https://pub.dartlang.org" 30 | source: hosted 31 | version: "1.2.0" 32 | clock: 33 | dependency: transitive 34 | description: 35 | name: clock 36 | url: "https://pub.dartlang.org" 37 | source: hosted 38 | version: "1.1.0" 39 | collection: 40 | dependency: transitive 41 | description: 42 | name: collection 43 | url: "https://pub.dartlang.org" 44 | source: hosted 45 | version: "1.15.0" 46 | cupertino_icons: 47 | dependency: "direct main" 48 | description: 49 | name: cupertino_icons 50 | url: "https://pub.dartlang.org" 51 | source: hosted 52 | version: "0.1.2" 53 | fake_async: 54 | dependency: transitive 55 | description: 56 | name: fake_async 57 | url: "https://pub.dartlang.org" 58 | source: hosted 59 | version: "1.2.0" 60 | flutter: 61 | dependency: "direct main" 62 | description: flutter 63 | source: sdk 64 | version: "0.0.0" 65 | flutter_test: 66 | dependency: "direct dev" 67 | description: flutter 68 | source: sdk 69 | version: "0.0.0" 70 | matcher: 71 | dependency: transitive 72 | description: 73 | name: matcher 74 | url: "https://pub.dartlang.org" 75 | source: hosted 76 | version: "0.12.10" 77 | meta: 78 | dependency: transitive 79 | description: 80 | name: meta 81 | url: "https://pub.dartlang.org" 82 | source: hosted 83 | version: "1.3.0" 84 | path: 85 | dependency: transitive 86 | description: 87 | name: path 88 | url: "https://pub.dartlang.org" 89 | source: hosted 90 | version: "1.8.0" 91 | sky_engine: 92 | dependency: transitive 93 | description: flutter 94 | source: sdk 95 | version: "0.0.99" 96 | source_span: 97 | dependency: transitive 98 | description: 99 | name: source_span 100 | url: "https://pub.dartlang.org" 101 | source: hosted 102 | version: "1.8.0" 103 | stack_trace: 104 | dependency: transitive 105 | description: 106 | name: stack_trace 107 | url: "https://pub.dartlang.org" 108 | source: hosted 109 | version: "1.10.0" 110 | stream_channel: 111 | dependency: transitive 112 | description: 113 | name: stream_channel 114 | url: "https://pub.dartlang.org" 115 | source: hosted 116 | version: "2.1.0" 117 | string_scanner: 118 | dependency: transitive 119 | description: 120 | name: string_scanner 121 | url: "https://pub.dartlang.org" 122 | source: hosted 123 | version: "1.1.0" 124 | term_glyph: 125 | dependency: transitive 126 | description: 127 | name: term_glyph 128 | url: "https://pub.dartlang.org" 129 | source: hosted 130 | version: "1.2.0" 131 | test_api: 132 | dependency: transitive 133 | description: 134 | name: test_api 135 | url: "https://pub.dartlang.org" 136 | source: hosted 137 | version: "0.2.19" 138 | typed_data: 139 | dependency: transitive 140 | description: 141 | name: typed_data 142 | url: "https://pub.dartlang.org" 143 | source: hosted 144 | version: "1.3.0" 145 | vector_math: 146 | dependency: transitive 147 | description: 148 | name: vector_math 149 | url: "https://pub.dartlang.org" 150 | source: hosted 151 | version: "2.1.0" 152 | sdks: 153 | dart: ">=2.12.0 <3.0.0" 154 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: flutter_login_screens 2 | description: A new Flutter application. 3 | version: "1.0.0+1" 4 | environment: 5 | sdk: '>=2.12.0 <3.0.0' 6 | dependencies: 7 | flutter: 8 | sdk: flutter 9 | 10 | # The following adds the Cupertino Icons font to your application. 11 | # Use with the CupertinoIcons class for iOS style icons. 12 | cupertino_icons: ^0.1.2 13 | 14 | dev_dependencies: 15 | flutter_test: 16 | sdk: flutter 17 | 18 | 19 | # For information on the generic Dart part of this file, see the 20 | # following page: https://www.dartlang.org/tools/pub/pubspec 21 | 22 | # The following section is specific to Flutter. 23 | flutter: 24 | 25 | # The following line ensures that the Material Icons font is 26 | # included with your application, so that you can use the icons in 27 | # the material Icons class. 28 | uses-material-design: true 29 | 30 | # To add assets to your application, add an assets section, like this: 31 | assets: 32 | - assets/images/full-bloom.png 33 | - assets/images/mountains.jpeg 34 | - assets/images/mountains.jpg 35 | # - images/a_dot_ham.jpeg 36 | 37 | # An image asset can refer to one or more resolution-specific "variants", see 38 | # https://flutter.io/assets-and-images/#resolution-aware. 39 | 40 | # For details regarding adding assets from package dependencies, see 41 | # https://flutter.io/assets-and-images/#from-packages 42 | 43 | # To add custom fonts to your application, add a fonts section here, 44 | # in this "flutter" section. Each entry in this list should have a 45 | # "family" key with the font family name, and a "fonts" key with a 46 | # list giving the asset and other descriptors for the font. For 47 | # example: 48 | fonts: 49 | - family: icomoon 50 | fonts: 51 | - asset: assets/fonts/IcoMoon.ttf 52 | # fonts: 53 | # - family: Schyler 54 | # fonts: 55 | # - asset: fonts/Schyler-Regular.ttf 56 | # - asset: fonts/Schyler-Italic.ttf 57 | # style: italic 58 | # - family: Trajan Pro 59 | # fonts: 60 | # - asset: fonts/TrajanPro.ttf 61 | # - asset: fonts/TrajanPro_Bold.ttf 62 | # weight: 700 63 | # 64 | # For details regarding fonts from package dependencies, 65 | # see https://flutter.io/custom-fonts/#from-packages 66 | -------------------------------------------------------------------------------- /screenshots/buttons1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/buttons1.png -------------------------------------------------------------------------------- /screenshots/carbonCode.txt: -------------------------------------------------------------------------------- 1 | https://carbon.now.sh/?bg=rgba(143%2C150%2C156%2C0)&t=cobalt&wt=none&l=dart&ds=true&dsyoff=20px&dsblur=68px&wc=true&wa=false&pv=48px&ph=32px&ln=false&fm=Ubuntu%20Mono&fs=14px&lh=133%25&si=false&code=%250AColorLoader(%250A%2520%2520colors%253A%2520colors%252C%2520%250A%2520%2520duration%253A%2520Duration(milliseconds%253A%25201200)%250A)%252C%250A%250AColorLoader2(%250A%2520%2520%2520%2520color1%253A%2520Colors.redAccent%252C%250A%2520%2520%2520%2520color2%253A%2520Colors.green%252C%250A%2520%2520%2520%2520color3%253A%2520Colors.amber%250A)%252C%250A%250AColorLoader3(%250A%2520%2520radius%253A%252015.0%252C%250A%2520%2520dotRadius%253A%25206.0%252C%250A)%252C%250A%250AColorLoader3(%250A%2520%2520radius%253A%252020.0%252C%250A%2520%2520dotRadius%253A%25205.0%252C%250A)%252C%250A%250AColorLoader4(%250A%2520%2520dotOneColor%253A%2520Colors.pink%252C%250A%2520%2520dotTwoColor%253A%2520Colors.amber%252C%250A%2520%2520dotThreeColor%253A%2520Colors.deepOrange%252C%250A%2520%2520dotType%253A%2520DotType.square%252C%250A%2520%2520duration%253A%2520Duration(milliseconds%253A%25201200)%252C%250A)%252C%250A%250AColorLoader4(%250A%2520%2520dotOneColor%253A%2520Colors.pink%252C%250A%2520%2520dotTwoColor%253A%2520Colors.amber%252C%250A%2520%2520dotThreeColor%253A%2520Colors.deepOrange%252C%250A%2520%2520duration%253A%2520Duration(seconds%253A%25202)%252C%250A)%252C%250A%250AColorLoader5(%250A%2520%2520dotOneColor%253A%2520Colors.redAccent%252C%250A%2520%2520dotTwoColor%253A%2520Colors.blueAccent%252C%250A%2520%2520dotThreeColor%253A%2520Colors.green%252C%250A%2520%2520dotType%253A%2520DotType.circle%252C%250A%2520%2520dotIcon%253A%2520Icon(Icons.adjust)%252C%250A%2520%2520duration%253A%2520Duration(seconds%253A%25201)%252C%250A)&es=2x&wm=true&ts=false -------------------------------------------------------------------------------- /screenshots/color_loader.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/color_loader.gif -------------------------------------------------------------------------------- /screenshots/color_loader_2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/color_loader_2.gif -------------------------------------------------------------------------------- /screenshots/color_loader_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/color_loader_3.gif -------------------------------------------------------------------------------- /screenshots/color_loader_4.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/color_loader_4.gif -------------------------------------------------------------------------------- /screenshots/color_loader_5.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/color_loader_5.gif -------------------------------------------------------------------------------- /screenshots/loaders.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/loaders.gif -------------------------------------------------------------------------------- /screenshots/login_screen_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/login_screen_1.png -------------------------------------------------------------------------------- /screenshots/login_screen_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/login_screen_2.png -------------------------------------------------------------------------------- /screenshots/login_screen_3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/login_screen_3.gif -------------------------------------------------------------------------------- /screenshots/login_screen_4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/login_screen_4.jpeg -------------------------------------------------------------------------------- /screenshots/login_screen_5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/login_screen_5.jpeg -------------------------------------------------------------------------------- /screenshots/login_screen_6.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/login_screen_6.jpeg -------------------------------------------------------------------------------- /screenshots/rating.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/rating.gif -------------------------------------------------------------------------------- /screenshots/slide_list_view.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/screenshots/slide_list_view.gif -------------------------------------------------------------------------------- /test/widget_test.dart: -------------------------------------------------------------------------------- 1 | // This is a basic Flutter widget test. 2 | // 3 | // To perform an interaction with a widget in your test, use the WidgetTester 4 | // utility that Flutter provides. For example, you can send tap and scroll 5 | // gestures. You can also use WidgetTester to find child widgets in the widget 6 | // tree, read text, and verify that the values of widget properties are correct. 7 | 8 | import 'package:flutter/material.dart'; 9 | import 'package:flutter_test/flutter_test.dart'; 10 | 11 | import 'package:flutter_screens/main.dart'; 12 | 13 | void main() { 14 | testWidgets('Counter increments smoke test', (WidgetTester tester) async { 15 | // Build our app and trigger a frame. 16 | await tester.pumpWidget(MyApp()); 17 | 18 | // Verify that our counter starts at 0. 19 | expect(find.text('0'), findsOneWidget); 20 | expect(find.text('1'), findsNothing); 21 | 22 | // Tap the '+' icon and trigger a frame. 23 | await tester.tap(find.byIcon(Icons.add)); 24 | await tester.pump(); 25 | 26 | // Verify that our counter has incremented. 27 | expect(find.text('0'), findsNothing); 28 | expect(find.text('1'), findsOneWidget); 29 | }); 30 | } 31 | -------------------------------------------------------------------------------- /web/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/web/favicon.png -------------------------------------------------------------------------------- /web/icons/Icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/web/icons/Icon-192.png -------------------------------------------------------------------------------- /web/icons/Icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/samarthagarwal/FlutterScreens/8afc1abba2be860050e4a65d53610c977a4a9b59/web/icons/Icon-512.png -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | flutter_screens 30 | 31 | 32 | 33 | 36 | 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /web/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "flutter_screens", 3 | "short_name": "flutter_screens", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#0175C2", 7 | "theme_color": "#0175C2", 8 | "description": "A new Flutter project.", 9 | "orientation": "portrait-primary", 10 | "prefer_related_applications": false, 11 | "icons": [ 12 | { 13 | "src": "icons/Icon-192.png", 14 | "sizes": "192x192", 15 | "type": "image/png" 16 | }, 17 | { 18 | "src": "icons/Icon-512.png", 19 | "sizes": "512x512", 20 | "type": "image/png" 21 | } 22 | ] 23 | } 24 | --------------------------------------------------------------------------------