├── .gitignore ├── Adding Drawer └── lib │ └── main.dart ├── Alert Dialog └── lib │ └── main.dart ├── Animated Container └── lib │ └── main.dart ├── Animated Padding widget └── lib │ └── main.dart ├── Bottom Navigation Bar └── lib │ ├── main.dart │ └── pages.dart ├── Connectivity check └── lib │ └── main.dart ├── Creating Tab Bar └── lib │ └── main.dart ├── Creating a Floating App Bar └── lib │ └── main.dart ├── Cross fading between two widgets using AnimatedCrossFade widget └── lib │ ├── login.dart │ ├── main.dart │ └── signup.dart ├── Custom Clipper with ClipPath └── lib │ ├── image_clipper.dart │ └── main.dart ├── Custom Navigation Bar using IndexedStack └── lib │ └── main.dart ├── Forms and Validation └── lib │ └── main.dart ├── GridView and GridView builder └── lib │ └── main.dart ├── LICENSE ├── ListView and ListView builder └── lib │ └── main.dart ├── ListWheelScrollView (3D ListView) └── lib │ └── main.dart ├── Multi-ValueListenableBuilder └── lib │ └── main.dart ├── NotificationListener └── lib │ └── main.dart ├── PageView - Navigation using PageController └── lib │ ├── main.dart │ └── pages.dart ├── Radio └── lib │ └── main.dart ├── RefreshIndicator (Pull-to-refresh) └── lib │ └── main.dart ├── Search using SearchDelegate └── lib │ ├── main.dart │ └── search.dart ├── SharedPreference └── lib │ └── main.dart ├── Shimmer - Loading List └── lib │ └── main.dart ├── Showing a Snackbar └── lib │ └── main.dart ├── Slider └── lib │ └── main.dart ├── Smooth Star Rating └── lib │ └── main.dart ├── Splash Screen without external packages └── lib │ ├── main.dart │ └── splash.dart ├── StreamBuilder + Cloud Firestore + PageView └── lib │ └── main.dart ├── Typing Text Animation without external packages └── lib │ └── main.dart ├── Using Dismissible widget with ListView widget └── lib │ └── main.dart ├── ValueListenableBulder and ValueNotifier └── lib │ └── main.dart └── readme.md /.gitignore: -------------------------------------------------------------------------------- 1 | .vscode/ -------------------------------------------------------------------------------- /Adding Drawer/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Drawer Demo', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Drawer Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | String string = 'Drawer'; 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | drawerScrimColor: Colors.green, 33 | endDrawer: Drawer( 34 | child: Column(children: [ 35 | DrawerHeader(child: Icon(Icons.account_circle, size: 150.0),), 36 | ListTile(title: Text('Item 1'), onTap: (){ 37 | setState(() { 38 | string = 'You pressed item 1'; 39 | }); 40 | Navigator.pop(context); 41 | }), 42 | ListTile(title: Text('Item 2'), onTap: (){ 43 | setState(() { 44 | string = 'You pressed item 2'; 45 | }); 46 | Navigator.pop(context); 47 | }), 48 | ListTile(title: Text('Item 3'), onTap: (){ 49 | setState(() { 50 | string = 'You pressed item 3'; 51 | }); 52 | Navigator.pop(context); 53 | }) 54 | ],), 55 | ), 56 | appBar: AppBar( 57 | title: Text(widget.title), 58 | ), 59 | body: Center( 60 | child: Text(string, style: TextStyle(fontSize: 40.0),), 61 | ), 62 | ); 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /Alert Dialog/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Flutter Basics', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Alert Dialog - Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | final String title; 21 | 22 | @override 23 | _MyHomePageState createState() => _MyHomePageState(); 24 | } 25 | 26 | class _MyHomePageState extends State { 27 | bool isPressed = false; 28 | 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | appBar: AppBar( 33 | title: Text(widget.title), 34 | ), 35 | body: Center( 36 | child: RaisedButton( 37 | color: Colors.lightBlue, 38 | padding: EdgeInsets.all(20.0), 39 | child: Icon(Icons.thumb_up), 40 | onPressed: () { 41 | showDialog( 42 | barrierDismissible: false, 43 | context: context, 44 | builder: (context){ 45 | return AlertDialog( 46 | title: Text('Alert from DevKage'), 47 | content: Text('Have you subscribed yet?'), 48 | actions: [ 49 | FlatButton(child: Text('Yes'), onPressed: (){ 50 | Navigator.pop(context); 51 | },), 52 | FlatButton(child: Text('No'), onPressed: (){ 53 | Navigator.pop(context); 54 | },) 55 | ], 56 | ); 57 | } 58 | ); 59 | }, 60 | )), 61 | ); 62 | } 63 | } 64 | -------------------------------------------------------------------------------- /Animated Container/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Animated Container', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Animated Container Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | final String title; 21 | 22 | @override 23 | _MyHomePageState createState() => _MyHomePageState(); 24 | } 25 | 26 | class _MyHomePageState extends State { 27 | final selection = List(10); 28 | 29 | @override 30 | void initState() { 31 | super.initState(); 32 | for (int i = 0; i < 10; ++i) { 33 | selection[i] = false; 34 | } 35 | } 36 | 37 | @override 38 | Widget build(BuildContext context) { 39 | return Scaffold( 40 | appBar: AppBar( 41 | title: Text(widget.title), 42 | ), 43 | body: GridView.builder( 44 | gridDelegate: 45 | SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), 46 | itemCount: 6, 47 | itemBuilder: _buildAnimatedContainer)); 48 | } 49 | 50 | Widget _buildAnimatedContainer(BuildContext context, int index) { 51 | return ListTile( 52 | contentPadding: EdgeInsets.all(10.0), 53 | onTap: () { 54 | setState(() { 55 | selection[index] = !selection[index]; 56 | }); 57 | }, 58 | title: AnimatedContainer( 59 | duration: Duration(milliseconds: 500), 60 | color: selection[index] ? Colors.black : Colors.red, 61 | margin: EdgeInsets.all(selection[index] ? 30.0 : 10.0), 62 | ), 63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Animated Padding widget/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Animated Padding', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Animated Padding'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | double inset = 5.0; 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return Scaffold( 33 | appBar: AppBar( 34 | title: Text(widget.title), 35 | ), 36 | body: Center( 37 | child: AnimatedPadding( 38 | curve: Curves.slowMiddle, 39 | padding: EdgeInsets.all(inset), 40 | duration: Duration(milliseconds: 500), 41 | child: Image( 42 | image: AssetImage('assets/dog2.jpg'), 43 | ), 44 | )), 45 | floatingActionButton: Row( 46 | mainAxisAlignment: MainAxisAlignment.end, 47 | children: [ 48 | FloatingActionButton( 49 | child: Icon(Icons.zoom_in), 50 | onPressed: () { 51 | setState(() { 52 | inset += 100; 53 | }); 54 | }, 55 | ), 56 | FloatingActionButton( 57 | child: Icon(Icons.zoom_out), 58 | onPressed: () { 59 | setState(() { 60 | if (inset > 100) { 61 | inset -= 100; 62 | } 63 | }); 64 | }, 65 | ), 66 | ], 67 | ), 68 | ); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /Bottom Navigation Bar/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:bottom_navigation/pages.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | void main() => runApp(MyApp()); 5 | 6 | class MyApp extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return MaterialApp( 10 | title: 'Bottom Navigation Bar', 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | MyHomePage({Key key}) : super(key: key); 18 | 19 | @override 20 | _MyHomePageState createState() => _MyHomePageState(); 21 | } 22 | 23 | class _MyHomePageState extends State { 24 | int _seletedItem = 0; 25 | var _pages = [FirstPage(), SecondPage(), ThirdPage()]; 26 | 27 | @override 28 | Widget build(BuildContext context) { 29 | return Scaffold( 30 | appBar: AppBar(title: Text('Bottom Navigation Bar - Demo'),), 31 | body: Center(child: _pages[_seletedItem],), 32 | bottomNavigationBar: BottomNavigationBar( 33 | items: [ 34 | BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')), 35 | BottomNavigationBarItem(icon: Icon(Icons.photo), title: Text('Photos')), 36 | BottomNavigationBarItem(icon: Icon(Icons.account_circle), title: Text('Profile')) 37 | ], 38 | currentIndex: _seletedItem, 39 | onTap: (index){ 40 | setState(() { 41 | _seletedItem = index; 42 | }); 43 | }, 44 | ), 45 | ); 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /Bottom Navigation Bar/lib/pages.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class FirstPage extends StatelessWidget{ 4 | @override 5 | Widget build(BuildContext context) { 6 | return Scaffold(body: Center(child: Text('First Page', style: TextStyle(fontSize: 50.0),),),); 7 | } 8 | } 9 | 10 | class SecondPage extends StatelessWidget{ 11 | @override 12 | Widget build(BuildContext context) { 13 | return Scaffold(body: Center(child: Text('Second Page',style: TextStyle(fontSize: 50.0),),),); 14 | } 15 | } 16 | 17 | class ThirdPage extends StatelessWidget{ 18 | @override 19 | Widget build(BuildContext context) { 20 | return Scaffold(body: Center(child: Text('Third Page',style: TextStyle(fontSize: 50.0),),),); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Connectivity check/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:connectivity/connectivity.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:flutter/services.dart'; 4 | 5 | void main() { 6 | WidgetsFlutterBinding.ensureInitialized(); 7 | SystemChrome.setEnabledSystemUIOverlays([]); 8 | runApp(MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | title: 'Connectivity check', 16 | theme: ThemeData( 17 | primarySwatch: Colors.blue, 18 | visualDensity: VisualDensity.adaptivePlatformDensity, 19 | ), 20 | home: MyHomePage(title: 'Connectivity check'), 21 | debugShowCheckedModeBanner: false, 22 | ); 23 | } 24 | } 25 | 26 | class MyHomePage extends StatefulWidget { 27 | MyHomePage({Key key, this.title}) : super(key: key); 28 | 29 | final String title; 30 | 31 | @override 32 | _MyHomePageState createState() => _MyHomePageState(); 33 | } 34 | 35 | class _MyHomePageState extends State { 36 | @override 37 | Widget build(BuildContext context) { 38 | return Scaffold( 39 | appBar: AppBar( 40 | title: Text(widget.title), 41 | ), 42 | body: Center( 43 | child: StreamBuilder( 44 | stream: Connectivity().onConnectivityChanged, 45 | builder: (BuildContext context, 46 | AsyncSnapshot snapshot) { 47 | if (snapshot != null && 48 | snapshot.hasData && 49 | snapshot.data != ConnectivityResult.none) { 50 | return Text( 51 | 'Connected', 52 | style: TextStyle(fontSize: 30), 53 | ); 54 | } else { 55 | return Icon( 56 | Icons.wifi_off, 57 | size: 50, 58 | ); 59 | } 60 | }, 61 | ), 62 | ), 63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Creating Tab Bar/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Tabs', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Tabs Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | @override 29 | Widget build(BuildContext context) { 30 | return DefaultTabController( 31 | length: 3, 32 | child: Scaffold( 33 | appBar: AppBar( 34 | title: Text(widget.title), 35 | bottom: TabBar( 36 | indicatorWeight: 10.0, 37 | tabs: [ 38 | Tab( 39 | text: 'Incoming Call', 40 | ), 41 | Tab( 42 | text: 'Outgoing Call', 43 | ), 44 | Tab( 45 | text: 'Missed Call', 46 | ), 47 | ], 48 | ), 49 | ), 50 | body: TabBarView( 51 | children: [ 52 | _buildListViewWithName('Incoming Call'), 53 | _buildListViewWithName('Outgoing Call'), 54 | _buildListViewWithName('Missed Call'), 55 | ], 56 | )), 57 | ); 58 | } 59 | 60 | ListView _buildListViewWithName(String s) { 61 | return ListView.builder(itemBuilder: (context, index)=>ListTile( 62 | title: Text(s+' $index'), 63 | )); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Creating a Floating App Bar/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Floating App Bar', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Floating App Bar Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | body: CustomScrollView( 32 | slivers: [ 33 | SliverAppBar( 34 | floating: true, 35 | elevation: 50.0, 36 | expandedHeight: 200, 37 | flexibleSpace: Image.asset('assets/devkage.jpg', fit: BoxFit.cover,), 38 | ), 39 | SliverList( 40 | delegate: SliverChildBuilderDelegate( 41 | (context, index) => ListTile( 42 | title: Text('Item $index'), 43 | ), 44 | childCount: 100), 45 | ) 46 | ], 47 | )); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Cross fading between two widgets using AnimatedCrossFade widget/lib/login.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Login extends StatelessWidget { 4 | const Login({Key key}) : super(key: key); 5 | 6 | @override 7 | Widget build(BuildContext context) { 8 | return Container( 9 | padding: EdgeInsets.all(20.0), 10 | child: Column( 11 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 12 | children: [ 13 | Padding( 14 | child: Text( 15 | 'Login', 16 | style: TextStyle(fontSize: 30), 17 | ), 18 | padding: EdgeInsets.only(bottom: 100.0), 19 | ), 20 | TextField( 21 | decoration: InputDecoration(labelText: 'User name'), 22 | ), 23 | TextField( 24 | decoration: InputDecoration(labelText: 'Password'), 25 | ), 26 | ], 27 | ), 28 | ); 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Cross fading between two widgets using AnimatedCrossFade widget/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | import 'login.dart'; 4 | import 'signup.dart'; 5 | 6 | void main() => runApp(MyApp()); 7 | 8 | class MyApp extends StatelessWidget { 9 | @override 10 | Widget build(BuildContext context) { 11 | return MaterialApp( 12 | title: 'Animated Cross Fade', 13 | theme: ThemeData( 14 | primarySwatch: Colors.blue, 15 | ), 16 | home: MyHomePage(title: 'Animated Cross Fade'), 17 | ); 18 | } 19 | } 20 | 21 | class MyHomePage extends StatefulWidget { 22 | MyHomePage({Key key, this.title}) : super(key: key); 23 | 24 | final String title; 25 | 26 | @override 27 | _MyHomePageState createState() => _MyHomePageState(); 28 | } 29 | 30 | class _MyHomePageState extends State { 31 | bool flag = false; 32 | 33 | @override 34 | Widget build(BuildContext context) { 35 | return Scaffold( 36 | appBar: AppBar( 37 | title: Text(widget.title), 38 | ), 39 | body: Center( 40 | child: Column( 41 | children: [ 42 | AnimatedCrossFade( 43 | firstChild: Login(), 44 | secondChild: SignUp(), 45 | crossFadeState: 46 | flag ? CrossFadeState.showFirst : CrossFadeState.showSecond, 47 | duration: Duration(milliseconds: 500)), 48 | RaisedButton( 49 | child: Text('Done'), 50 | onPressed: () {}, 51 | ), 52 | FlatButton( 53 | child: Text(flag ? 'Go to Sign Up' : 'Go to Login'), 54 | onPressed: () { 55 | setState(() { 56 | flag = !flag; 57 | }); 58 | }, 59 | ) 60 | ], 61 | ), 62 | ), 63 | ); 64 | } 65 | } 66 | -------------------------------------------------------------------------------- /Cross fading between two widgets using AnimatedCrossFade widget/lib/signup.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SignUp extends StatelessWidget { 4 | const SignUp({Key key}) : super(key: key); 5 | 6 | @override 7 | Widget build(BuildContext context) { 8 | return Container( 9 | padding: EdgeInsets.all(20.0), 10 | child: Column( 11 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 12 | children: [ 13 | Padding( 14 | child: Text( 15 | 'Sign Up', 16 | style: TextStyle(fontSize: 30), 17 | ), padding: EdgeInsets.only(bottom: 100.0), 18 | ), 19 | TextField( 20 | decoration: InputDecoration(labelText: 'User name'), 21 | ), 22 | TextField( 23 | decoration: InputDecoration(labelText: 'Email'), 24 | ), 25 | TextField( 26 | decoration: InputDecoration(labelText: 'Password'), 27 | ), 28 | TextField( 29 | decoration: InputDecoration(labelText: 'Confirm Password'), 30 | ), 31 | ], 32 | ), 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /Custom Clipper with ClipPath/lib/image_clipper.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class ImageClipper extends CustomClipper { 4 | List _extractPoints(String clipPath, Size size) { 5 | final points = List.empty(growable: true); 6 | 7 | var tempString = clipPath.replaceAll("%", ""); 8 | tempString = tempString.replaceAll(", ", ","); 9 | 10 | final pointStrings = tempString.split(","); 11 | 12 | for (final pointString in pointStrings) { 13 | final coord = pointString.split(" "); 14 | 15 | if (coord.length == 2) { 16 | points.add( 17 | Offset( 18 | (double.parse(coord[0]) * size.width / 100), 19 | (double.parse(coord[1]) * size.height / 100), 20 | ), 21 | ); 22 | } 23 | } 24 | 25 | return points; 26 | } 27 | 28 | @override 29 | Path getClip(Size size) { 30 | final path = Path(); 31 | 32 | final clipPath = 33 | "20% 0%, 100% 0, 74% 59%, 0% 100%"; 34 | 35 | final points = _extractPoints(clipPath, size); 36 | 37 | path.addPolygon(points, true); 38 | 39 | return path; 40 | } 41 | 42 | @override 43 | bool shouldReclip(covariant CustomClipper oldClipper) { 44 | return true; 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /Custom Clipper with ClipPath/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | import 'package:lets_clip/image_clipper.dart'; 4 | 5 | void main() { 6 | WidgetsFlutterBinding.ensureInitialized(); 7 | SystemChrome.setEnabledSystemUIOverlays([]); 8 | runApp(MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | title: 'Custom Clipper', 16 | theme: ThemeData.light(), 17 | darkTheme: 18 | ThemeData.dark().copyWith(scaffoldBackgroundColor: Colors.black), 19 | themeMode: ThemeMode.dark, 20 | home: MyHomePage(title: 'Custom Clipper'), 21 | ); 22 | } 23 | } 24 | 25 | class MyHomePage extends StatefulWidget { 26 | MyHomePage({Key key, this.title}) : super(key: key); 27 | 28 | final String title; 29 | 30 | @override 31 | _MyHomePageState createState() => _MyHomePageState(); 32 | } 33 | 34 | class _MyHomePageState extends State { 35 | int currentIndex = 0; 36 | 37 | static const imageUrls = [ 38 | 'https://images.pexels.com/photos/815494/pexels-photo-815494.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 39 | 'https://images.pexels.com/photos/1591/technology-music-sound-things.jpg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 40 | 'https://images.pexels.com/photos/375751/pexels-photo-375751.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260', 41 | 'https://images.pexels.com/photos/844923/pexels-photo-844923.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 42 | 'https://images.pexels.com/photos/1037992/pexels-photo-1037992.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 43 | 'https://images.pexels.com/photos/1100538/pexels-photo-1100538.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 44 | 'https://images.pexels.com/photos/3394648/pexels-photo-3394648.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 45 | 'https://images.pexels.com/photos/933245/pexels-photo-933245.jpeg?auto=compress&cs=tinysrgb&dpr=3&h=750&w=1260', 46 | 'https://images.pexels.com/photos/2011260/pexels-photo-2011260.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 47 | 'https://images.pexels.com/photos/324672/pexels-photo-324672.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 48 | 'https://images.pexels.com/photos/2346992/pexels-photo-2346992.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 49 | 'https://images.pexels.com/photos/1649771/pexels-photo-1649771.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 50 | 'https://images.pexels.com/photos/2011258/pexels-photo-2011258.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 51 | 'https://images.pexels.com/photos/5382359/pexels-photo-5382359.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 52 | 'https://images.pexels.com/photos/610945/pexels-photo-610945.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 53 | 'https://images.pexels.com/photos/5269691/pexels-photo-5269691.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 54 | 'https://images.pexels.com/photos/5269735/pexels-photo-5269735.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 55 | 'https://images.pexels.com/photos/3330855/pexels-photo-3330855.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940', 56 | ]; 57 | 58 | @override 59 | Widget build(BuildContext context) { 60 | return Scaffold( 61 | body: GridView.builder( 62 | gridDelegate: 63 | SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2), 64 | itemCount: imageUrls.length, 65 | itemBuilder: (BuildContext context, int index) { 66 | return GridTile( 67 | child: ClipPath( 68 | clipper: ImageClipper(), 69 | // Note: Image.network is used just to avoid dependency on cached_network_image. 70 | child: Image.network( 71 | imageUrls.elementAt(index), 72 | fit: BoxFit.cover, 73 | ), 74 | ), 75 | ); 76 | }, 77 | ), 78 | ); 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /Custom Navigation Bar using IndexedStack/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Indexed Stack', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Indexed Stack'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | int index = 0; 29 | 30 | @override 31 | Widget build(BuildContext context) { 32 | return Scaffold( 33 | appBar: AppBar( 34 | title: Text(widget.title), 35 | ), 36 | body: Padding( 37 | child: Column( 38 | children: [_getStackedContainers(), _getNavigationButton()], 39 | ), padding: EdgeInsets.all(5.0), 40 | ), 41 | ); 42 | } 43 | 44 | Widget _getStackedContainers() { 45 | return Expanded( 46 | child: IndexedStack( 47 | index: index, 48 | children: [ 49 | Container( 50 | color: Colors.red, 51 | ), 52 | Container( 53 | color: Colors.blue, 54 | ), 55 | Container( 56 | color: Colors.green, 57 | ), 58 | ], 59 | ), 60 | ); 61 | } 62 | 63 | Widget _getNavigationButton() { 64 | return Row( 65 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 66 | children: [ 67 | FlatButton( 68 | child: Text('Red', style: TextStyle(fontSize: 15.0),), 69 | onPressed: () { 70 | setState(() { 71 | index = 0; 72 | }); 73 | }, 74 | ), 75 | FlatButton( 76 | child: Text('Blue', style: TextStyle(fontSize: 15.0),), 77 | onPressed: () { 78 | setState(() { 79 | index = 1; 80 | }); 81 | }, 82 | ), 83 | FlatButton( 84 | child: Text('Green', style: TextStyle(fontSize: 15.0),), 85 | onPressed: () { 86 | setState(() { 87 | index = 2; 88 | }); 89 | }, 90 | ), 91 | ], 92 | ); 93 | } 94 | } 95 | -------------------------------------------------------------------------------- /Forms and Validation/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(MyApp()); 5 | } 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Forms and Validation', 12 | theme: ThemeData( 13 | primarySwatch: Colors.blue, 14 | visualDensity: VisualDensity.adaptivePlatformDensity, 15 | ), 16 | home: MyHomePage(title: 'Forms and Validation'), 17 | ); 18 | } 19 | } 20 | 21 | class MyHomePage extends StatefulWidget { 22 | MyHomePage({Key key, this.title}) : super(key: key); 23 | 24 | final String title; 25 | 26 | @override 27 | _MyHomePageState createState() => _MyHomePageState(); 28 | } 29 | 30 | class _MyHomePageState extends State { 31 | final _formKey = GlobalKey(); 32 | final _passwordController = TextEditingController(); 33 | final _confirmPasswordController = TextEditingController(); 34 | 35 | @override 36 | void dispose() { 37 | _passwordController.dispose(); 38 | _confirmPasswordController.dispose(); 39 | super.dispose(); 40 | } 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | return Scaffold( 45 | appBar: AppBar( 46 | title: Text(widget.title), 47 | ), 48 | body: Container( 49 | padding: EdgeInsets.symmetric( 50 | vertical: 50.0, 51 | horizontal: 10.0, 52 | ), 53 | child: _buildForm(), 54 | ), 55 | floatingActionButton: FloatingActionButton( 56 | onPressed: () { 57 | if (_formKey.currentState.validate()) { 58 | debugPrint('All validations passed!!!'); 59 | } 60 | }, 61 | child: Icon(Icons.done), 62 | ), 63 | ); 64 | } 65 | 66 | Form _buildForm() { 67 | return Form( 68 | key: _formKey, 69 | child: Column( 70 | children: [ 71 | Padding( 72 | padding: const EdgeInsets.all(8.0), 73 | child: TextFormField( 74 | validator: (String value) { 75 | return null; 76 | }, 77 | keyboardType: TextInputType.phone, 78 | decoration: InputDecoration( 79 | labelText: 'Mobile', 80 | border: OutlineInputBorder( 81 | borderRadius: BorderRadius.circular(20.0)), 82 | ), 83 | ), 84 | ), 85 | Padding( 86 | padding: const EdgeInsets.all(8.0), 87 | child: TextFormField( 88 | validator: (String value) { 89 | if (value.isEmpty) { 90 | return 'Username cannot be empty'; 91 | } else if (value.length < 3) { 92 | return 'Username must be at least 3 characters long.'; 93 | } 94 | return null; 95 | }, 96 | decoration: InputDecoration( 97 | labelText: 'Username', 98 | border: OutlineInputBorder( 99 | borderRadius: BorderRadius.circular(20.0)), 100 | ), 101 | ), 102 | ), 103 | Padding( 104 | padding: const EdgeInsets.all(8.0), 105 | child: TextFormField( 106 | obscureText: true, 107 | controller: _passwordController, 108 | validator: (String value) { 109 | if (value.isEmpty) { 110 | return 'Password cannot be empty'; 111 | } else if (value.length < 6) { 112 | return 'Password must be at least 6 characters long.'; 113 | } 114 | return null; 115 | }, 116 | decoration: InputDecoration( 117 | labelText: 'Password', 118 | border: OutlineInputBorder( 119 | borderRadius: BorderRadius.circular(20.0)), 120 | ), 121 | ), 122 | ), 123 | Padding( 124 | padding: const EdgeInsets.all(8.0), 125 | child: TextFormField( 126 | obscureText: true, 127 | controller: _confirmPasswordController, 128 | validator: (String value) { 129 | if (value != _passwordController.value.text) { 130 | return 'Passwords do not match!'; 131 | } 132 | return null; 133 | }, 134 | decoration: InputDecoration( 135 | labelText: 'Confirm Password', 136 | border: OutlineInputBorder( 137 | borderRadius: BorderRadius.circular(20.0)), 138 | ), 139 | ), 140 | ), 141 | ], 142 | ), 143 | ); 144 | } 145 | } 146 | -------------------------------------------------------------------------------- /GridView and GridView builder/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Grid View', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Grid View Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | appBar: AppBar( 32 | title: Text(widget.title), 33 | ), 34 | body: GridView.builder( 35 | itemCount: 100, 36 | gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent( 37 | maxCrossAxisExtent: 150, 38 | crossAxisSpacing: 10.0, 39 | mainAxisSpacing: 10.0, 40 | ), 41 | itemBuilder: (context, index) => Container( 42 | color: Colors.blue, 43 | child: Center( 44 | child: Text( 45 | "$index", 46 | style: TextStyle(fontSize: 30.0), 47 | )), 48 | ))); 49 | } 50 | } 51 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Shubham Kamble 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /ListView and ListView builder/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'ListView Demo', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'ListView Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | appBar: AppBar( 32 | title: Text(widget.title), 33 | ), 34 | body: ListView.builder( 35 | physics: BouncingScrollPhysics(), 36 | reverse: true, 37 | itemExtent: 100.0, 38 | itemCount: 100, 39 | itemBuilder: (context, index) { 40 | return index % 5 == 0 41 | ? Text( 42 | 'Header', 43 | style: TextStyle(fontSize: 20.0), 44 | textAlign: TextAlign.center, 45 | ) 46 | : ListTile( 47 | title: Text('Item $index'), 48 | ); 49 | }, 50 | )); 51 | } 52 | } 53 | -------------------------------------------------------------------------------- /ListWheelScrollView (3D ListView)/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'List Wheel Scroll View', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'List Wheel Scroll View'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | appBar: AppBar( 32 | title: Text(widget.title), 33 | ), 34 | body: ListWheelScrollView.useDelegate( 35 | itemExtent: 200, 36 | diameterRatio: 3, 37 | renderChildrenOutsideViewport: true, 38 | clipToSize: false, 39 | physics: BouncingScrollPhysics(), 40 | childDelegate: ListWheelChildBuilderDelegate( 41 | childCount: 100, 42 | builder: (context, index) => Container( 43 | color: Colors.green, 44 | child: Center( 45 | child: Text('Item $index'), 46 | ), 47 | )))); 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /Multi-ValueListenableBuilder/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | import 'package:multi_value_listenable_builder/multi_value_listenable_builder.dart'; 4 | 5 | void main() { 6 | WidgetsFlutterBinding.ensureInitialized(); 7 | SystemChrome.setEnabledSystemUIOverlays([]); 8 | runApp(MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | debugShowCheckedModeBanner: false, 16 | darkTheme: ThemeData.dark(), 17 | themeMode: ThemeMode.dark, 18 | title: 'Flutter Demo', 19 | theme: ThemeData( 20 | primarySwatch: Colors.blue, 21 | ), 22 | home: MyHomePage(title: 'Multi-ValueListenableBuilder'), 23 | ); 24 | } 25 | } 26 | 27 | class MyHomePage extends StatefulWidget { 28 | MyHomePage({Key? key, required this.title}) : super(key: key); 29 | 30 | final String title; 31 | 32 | @override 33 | _MyHomePageState createState() => _MyHomePageState(); 34 | } 35 | 36 | class _MyHomePageState extends State { 37 | ValueNotifier alpha = ValueNotifier(255); 38 | ValueNotifier red = ValueNotifier(255); 39 | ValueNotifier green = ValueNotifier(255); 40 | ValueNotifier blue = ValueNotifier(255); 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | return Scaffold( 45 | body: Center( 46 | child: Column( 47 | mainAxisAlignment: MainAxisAlignment.center, 48 | children: [ 49 | MultiValueListenableBuider( 50 | valueListenables: [alpha, red, green, blue], 51 | builder: (context, values, child) { 52 | return Container( 53 | height: 200, 54 | width: 200, 55 | color: Color.fromARGB( 56 | values.elementAt(0), 57 | values.elementAt(1), 58 | values.elementAt(2), 59 | values.elementAt(3), 60 | ), 61 | ); 62 | }, 63 | ), 64 | ValueListenableBuilder( 65 | valueListenable: alpha, 66 | builder: (context, value, child) { 67 | return Slider( 68 | min: 0, 69 | max: 255, 70 | value: value.toDouble(), 71 | onChanged: (newValue) => alpha.value = newValue.toInt(), 72 | ); 73 | }, 74 | ), 75 | ValueListenableBuilder( 76 | valueListenable: red, 77 | builder: (context, value, child) { 78 | return Slider( 79 | min: 0, 80 | max: 255, 81 | value: value.toDouble(), 82 | onChanged: (newValue) => red.value = newValue.toInt(), 83 | ); 84 | }, 85 | ), 86 | ValueListenableBuilder( 87 | valueListenable: green, 88 | builder: (context, value, child) { 89 | return Slider( 90 | min: 0, 91 | max: 255, 92 | value: value.toDouble(), 93 | onChanged: (newValue) => green.value = newValue.toInt(), 94 | ); 95 | }, 96 | ), 97 | ValueListenableBuilder( 98 | valueListenable: blue, 99 | builder: (context, value, child) { 100 | return Slider( 101 | min: 0, 102 | max: 255, 103 | value: value.toDouble(), 104 | onChanged: (newValue) => blue.value = newValue.toInt(), 105 | ); 106 | }, 107 | ), 108 | ], 109 | ), 110 | ), 111 | ); 112 | } 113 | } 114 | -------------------------------------------------------------------------------- /NotificationListener/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/rendering.dart'; 3 | import 'package:flutter/services.dart'; 4 | 5 | void main() { 6 | WidgetsFlutterBinding.ensureInitialized(); 7 | SystemChrome.setEnabledSystemUIOverlays([]); 8 | runApp(MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | title: 'Notification Listeners', 16 | theme: ThemeData( 17 | primarySwatch: Colors.blue, 18 | visualDensity: VisualDensity.adaptivePlatformDensity, 19 | ), 20 | home: MyHomePage(title: 'Notification Listeners'), 21 | ); 22 | } 23 | } 24 | 25 | class MyHomePage extends StatefulWidget { 26 | MyHomePage({Key key, this.title}) : super(key: key); 27 | 28 | final String title; 29 | 30 | @override 31 | _MyHomePageState createState() => _MyHomePageState(); 32 | } 33 | 34 | class _MyHomePageState extends State { 35 | bool showFab = false; 36 | ScrollController _scrollController; 37 | 38 | @override 39 | void initState() { 40 | super.initState(); 41 | _scrollController = ScrollController(); 42 | } 43 | 44 | @override 45 | void dispose() { 46 | _scrollController.dispose(); 47 | super.dispose(); 48 | } 49 | 50 | @override 51 | Widget build(BuildContext context) { 52 | return Scaffold( 53 | appBar: AppBar( 54 | title: Text(widget.title), 55 | ), 56 | body: NotificationListener( 57 | onNotification: (notification) { 58 | setState(() { 59 | if (notification.direction == ScrollDirection.forward) { 60 | showFab = false; 61 | } else if (notification.direction == ScrollDirection.reverse) { 62 | showFab = true; 63 | } 64 | }); 65 | return true; 66 | }, 67 | child: ListView.builder( 68 | itemCount: 200, 69 | controller: _scrollController, 70 | itemBuilder: (BuildContext context, int index) { 71 | return ListTile( 72 | title: Text('Item $index'), 73 | ); 74 | }, 75 | ), 76 | ), 77 | floatingActionButton: showFab 78 | ? FloatingActionButton( 79 | child: Icon(Icons.arrow_downward_rounded), 80 | onPressed: () { 81 | _scrollController 82 | .jumpTo(_scrollController.position.maxScrollExtent); 83 | }, 84 | ) 85 | : null, 86 | ); 87 | } 88 | } 89 | -------------------------------------------------------------------------------- /PageView - Navigation using PageController/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:navigation_with_page_controller/pages.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | void main() => runApp(MyApp()); 5 | 6 | class MyApp extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return MaterialApp( 10 | title: 'Bottom Navigation Bar', 11 | home: MyHomePage(), 12 | ); 13 | } 14 | } 15 | 16 | class MyHomePage extends StatefulWidget { 17 | MyHomePage({Key key}) : super(key: key); 18 | 19 | @override 20 | _MyHomePageState createState() => _MyHomePageState(); 21 | } 22 | 23 | class _MyHomePageState extends State { 24 | int _seletedItem = 0; 25 | var _pages = [FirstPage(), SecondPage(), ThirdPage()]; 26 | var _pageController = PageController(); 27 | 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | appBar: AppBar( 32 | title: Text('Page Controller Navigation - Demo'), 33 | ), 34 | body: PageView( 35 | children: _pages, 36 | onPageChanged: (index) { 37 | setState(() { 38 | _seletedItem = index; 39 | }); 40 | }, 41 | controller: _pageController, 42 | ), 43 | bottomNavigationBar: BottomNavigationBar( 44 | items: [ 45 | BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')), 46 | BottomNavigationBarItem( 47 | icon: Icon(Icons.photo), title: Text('Photos')), 48 | BottomNavigationBarItem( 49 | icon: Icon(Icons.account_circle), title: Text('Profile')) 50 | ], 51 | currentIndex: _seletedItem, 52 | onTap: (index) { 53 | setState(() { 54 | _seletedItem = index; 55 | _pageController.animateToPage(_seletedItem, 56 | duration: Duration(milliseconds: 200), curve: Curves.linear); 57 | }); 58 | }, 59 | ), 60 | ); 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /PageView - Navigation using PageController/lib/pages.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class FirstPage extends StatelessWidget{ 4 | @override 5 | Widget build(BuildContext context) { 6 | return Scaffold(body: Center(child: Text('First Page', style: TextStyle(fontSize: 50.0),),),); 7 | } 8 | } 9 | 10 | class SecondPage extends StatelessWidget{ 11 | @override 12 | Widget build(BuildContext context) { 13 | return Scaffold(body: Center(child: Text('Second Page',style: TextStyle(fontSize: 50.0),),),); 14 | } 15 | } 16 | 17 | class ThirdPage extends StatelessWidget{ 18 | @override 19 | Widget build(BuildContext context) { 20 | return Scaffold(body: Center(child: Text('Third Page',style: TextStyle(fontSize: 50.0),),),); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Radio/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(MyApp()); 5 | } 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Radio Demo', 12 | theme: ThemeData( 13 | primarySwatch: Colors.blue, 14 | visualDensity: VisualDensity.adaptivePlatformDensity, 15 | ), 16 | home: MyHomePage(title: 'Radio Demo'), 17 | ); 18 | } 19 | } 20 | 21 | class MyHomePage extends StatefulWidget { 22 | MyHomePage({Key key, this.title}) : super(key: key); 23 | 24 | final String title; 25 | 26 | @override 27 | _MyHomePageState createState() => _MyHomePageState(); 28 | } 29 | 30 | enum Type { Type1, Type2, Type3, Type4 } 31 | const Map iconMap = { 32 | Type.Type1: Icons.account_circle, 33 | Type.Type2: Icons.photo, 34 | Type.Type3: Icons.settings, 35 | Type.Type4: Icons.video_collection 36 | }; 37 | 38 | class _MyHomePageState extends State { 39 | Type myType = Type.Type1; 40 | 41 | @override 42 | Widget build(BuildContext context) { 43 | return Scaffold( 44 | appBar: AppBar( 45 | title: Text(widget.title), 46 | ), 47 | body: Center( 48 | child: Column( 49 | mainAxisAlignment: MainAxisAlignment.center, 50 | children: [ 51 | Icon( 52 | iconMap[myType], 53 | size: 200.0, 54 | ), 55 | Row( 56 | mainAxisAlignment: MainAxisAlignment.center, 57 | children: [ 58 | Radio( 59 | value: Type.Type1, 60 | groupValue: myType, 61 | onChanged: (Type type) { 62 | setState( 63 | () { 64 | myType = type; 65 | }, 66 | ); 67 | }, 68 | ), 69 | Radio( 70 | value: Type.Type2, 71 | groupValue: myType, 72 | onChanged: (Type type) { 73 | setState( 74 | () { 75 | myType = type; 76 | }, 77 | ); 78 | }, 79 | ), 80 | Radio( 81 | value: Type.Type3, 82 | groupValue: myType, 83 | onChanged: (Type type) { 84 | setState( 85 | () { 86 | myType = type; 87 | }, 88 | ); 89 | }, 90 | ), 91 | Radio( 92 | value: Type.Type4, 93 | groupValue: myType, 94 | onChanged: (Type type) { 95 | setState( 96 | () { 97 | myType = type; 98 | }, 99 | ); 100 | }, 101 | ), 102 | ], 103 | ), 104 | ], 105 | ), 106 | ), 107 | ); 108 | } 109 | } 110 | -------------------------------------------------------------------------------- /RefreshIndicator (Pull-to-refresh)/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'dart:convert'; 2 | 3 | import 'package:flutter/material.dart'; 4 | import 'package:flutter/services.dart'; 5 | import 'package:http/http.dart' as http; 6 | 7 | void main() { 8 | WidgetsFlutterBinding.ensureInitialized(); 9 | SystemChrome.setEnabledSystemUIOverlays([]); 10 | runApp(MyApp()); 11 | } 12 | 13 | class MyApp extends StatelessWidget { 14 | @override 15 | Widget build(BuildContext context) { 16 | return MaterialApp( 17 | title: 'Pull to refresh', 18 | theme: ThemeData( 19 | primarySwatch: Colors.blue, 20 | visualDensity: VisualDensity.adaptivePlatformDensity, 21 | ), 22 | home: MyHomePage(title: 'Pull to refresh'), 23 | ); 24 | } 25 | } 26 | 27 | class MyHomePage extends StatefulWidget { 28 | MyHomePage({Key key, this.title}) : super(key: key); 29 | 30 | final String title; 31 | 32 | @override 33 | _MyHomePageState createState() => _MyHomePageState(); 34 | } 35 | 36 | const randomUsersUrl = 'https://randomuser.me/api/?results=20'; 37 | 38 | class _MyHomePageState extends State { 39 | List _users; 40 | 41 | @override 42 | void initState() { 43 | super.initState(); 44 | _getUsers(); 45 | } 46 | 47 | @override 48 | Widget build(BuildContext context) { 49 | return Scaffold( 50 | appBar: AppBar( 51 | title: Text(widget.title), 52 | ), 53 | body: _users == null 54 | ? Center( 55 | child: CircularProgressIndicator(), 56 | ) 57 | : RefreshIndicator( 58 | onRefresh: _getUsers, 59 | child: ListView.builder( 60 | physics: AlwaysScrollableScrollPhysics(), 61 | itemCount: _users.length, 62 | itemBuilder: (BuildContext context, int index) { 63 | return ListTile( 64 | title: Text(_users.elementAt(index).name), 65 | subtitle: Text(_users.elementAt(index).email), 66 | trailing: Image.network( 67 | _users.elementAt(index).imageUrl, 68 | ), 69 | ); 70 | }, 71 | ), 72 | ), 73 | ); 74 | } 75 | 76 | Future _getUsers() async { 77 | final response = await http.get(randomUsersUrl); 78 | if (response.statusCode == 200) { 79 | final data = json.decode(response.body); 80 | 81 | final temp = List(); 82 | for (final user in data['results']) { 83 | temp.add( 84 | User( 85 | name: 86 | "${user['name']['title']} ${user['name']['first']} ${user['name']['last']}", 87 | email: user['email'], 88 | imageUrl: user['picture']['thumbnail'], 89 | ), 90 | ); 91 | } 92 | 93 | setState(() { 94 | _users = temp; 95 | }); 96 | } 97 | } 98 | } 99 | 100 | class User { 101 | final String name; 102 | final String email; 103 | final String imageUrl; 104 | 105 | User({this.name, this.email, this.imageUrl}); 106 | } 107 | -------------------------------------------------------------------------------- /Search using SearchDelegate/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | import 'package:flutter_search/search.dart'; 4 | 5 | void main() { 6 | WidgetsFlutterBinding.ensureInitialized(); 7 | SystemChrome.setEnabledSystemUIOverlays([]); 8 | runApp(MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | title: 'SearchDelegate', 16 | theme: ThemeData( 17 | primarySwatch: Colors.blue, 18 | visualDensity: VisualDensity.adaptivePlatformDensity, 19 | ), 20 | home: MyHomePage(title: 'SearchDelegate'), 21 | debugShowCheckedModeBanner: false, 22 | ); 23 | } 24 | } 25 | 26 | class MyHomePage extends StatefulWidget { 27 | MyHomePage({Key key, this.title}) : super(key: key); 28 | 29 | final String title; 30 | 31 | @override 32 | _MyHomePageState createState() => _MyHomePageState(); 33 | } 34 | 35 | class _MyHomePageState extends State { 36 | @override 37 | Widget build(BuildContext context) { 38 | return Scaffold( 39 | appBar: AppBar( 40 | title: Text(widget.title), 41 | ), 42 | body: ListView.builder( 43 | itemCount: names.length, 44 | itemBuilder: (BuildContext context, int index) { 45 | return ListTile( 46 | title: Text( 47 | names.elementAt(index), 48 | ), 49 | ); 50 | }, 51 | ), 52 | floatingActionButton: FloatingActionButton( 53 | child: Icon(Icons.search), 54 | onPressed: () async { 55 | final result = await showSearch( 56 | context: context, 57 | delegate: NameSearch(names), 58 | ); 59 | 60 | print(result); 61 | }, 62 | ), 63 | ); 64 | } 65 | } 66 | 67 | const names = [ 68 | "Camila Chapman", 69 | "Belinda Cameron", 70 | "Amelia Harris", 71 | "Aldus Howard", 72 | "Mike Ryan", 73 | "Adelaide Perry", 74 | "Derek Hall", 75 | "Cherry Ryan", 76 | "Derek Owens", 77 | "John Walker", 78 | "Belinda Ferguson", 79 | "Vanessa Barrett", 80 | "Julian Foster", 81 | "Jasmine Evans", 82 | "Sabrina Hunt", 83 | "Deanna Carroll", 84 | "Hailey Murray", 85 | "Maximilian Crawford", 86 | "Grace Wright", 87 | "Garry Murphy", 88 | "Catherine Ferguson", 89 | "Amelia Watson", 90 | "Alisa Baker", 91 | "Maria Miller", 92 | "Daisy Harper", 93 | "Michelle West", 94 | "Caroline Taylor", 95 | "Heather West", 96 | "Justin Lloyd", 97 | "Lydia Cameron", 98 | "Daryl Harris", 99 | "Tara Robinson", 100 | "Haris Wells", 101 | "Emily Scott", 102 | "Catherine Wells", 103 | "Ned Murphy", 104 | "Blake Casey", 105 | "Chelsea Mitchell", 106 | "Stuart Reed", 107 | "Ellia Jones", 108 | "Florrie Lloyd", 109 | "Blake Barnes", 110 | "Jack Cole", 111 | "Adele Henderson", 112 | "Jessica Rogers", 113 | "Florrie Barrett", 114 | "Ryan Owens", 115 | "Briony Dixon", 116 | "Alexander Cole", 117 | "Jessica Casey", 118 | "Ryan Grant", 119 | "Emily Fowler", 120 | "Edith Turner", 121 | "Max Payne", 122 | "Melanie Davis", 123 | "Lucas Mitchell", 124 | "Aldus Warren", 125 | "Ashton Kelley", 126 | "Frederick Armstrong", 127 | "Chester Smith", 128 | "Alissa Riley", 129 | "Bruce Rogers", 130 | "Edgar Armstrong", 131 | "Cadie Cooper", 132 | "Ryan Scott", 133 | "Rebecca Campbell", 134 | "Rebecca Parker", 135 | "Grace Bennett", 136 | "Alen Cunningham", 137 | "Lucia Douglas", 138 | "Sydney Allen", 139 | "Roland Cole", 140 | "Eddy Lloyd", 141 | "Haris Murphy", 142 | "Fiona Farrell", 143 | "Honey Jones", 144 | "Edward Watson", 145 | "Ada Harris", 146 | "Jordan Owens", 147 | "Carlos Stevens", 148 | "Alissa Howard", 149 | "Madaline Smith", 150 | "Luke Carroll", 151 | "Paul Campbell", 152 | "Adrian Murray", 153 | "Ashton Brown", 154 | "Ned Harris", 155 | "Michelle Thomas", 156 | "Ted Evans", 157 | "Adelaide Hawkins", 158 | "Sydney Hall", 159 | "Arnold Ross", 160 | "Clark Stewart", 161 | "Carl Smith", 162 | "Vivian Watson", 163 | "Sam Wells", 164 | "Arnold Stevens", 165 | "Vivian Miller", 166 | "John Hawkins", 167 | "Edgar Payne", 168 | ]; 169 | -------------------------------------------------------------------------------- /Search using SearchDelegate/lib/search.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class NameSearch extends SearchDelegate { 4 | final List names; 5 | String result; 6 | 7 | NameSearch(this.names); 8 | 9 | @override 10 | List buildActions(BuildContext context) { 11 | return [ 12 | IconButton( 13 | icon: Icon(Icons.clear), 14 | onPressed: () { 15 | query = ''; 16 | }, 17 | ) 18 | ]; 19 | } 20 | 21 | @override 22 | Widget buildLeading(BuildContext context) { 23 | return IconButton( 24 | icon: Icon(Icons.arrow_back), 25 | onPressed: () { 26 | close(context, result); 27 | }, 28 | ); 29 | } 30 | 31 | @override 32 | Widget buildResults(BuildContext context) { 33 | final suggestions = names.where((name) { 34 | return name.toLowerCase().contains(query.toLowerCase()); 35 | }); 36 | 37 | return ListView.builder( 38 | itemCount: suggestions.length, 39 | itemBuilder: (BuildContext context, int index) { 40 | return ListTile( 41 | title: Text( 42 | suggestions.elementAt(index), 43 | ), 44 | onTap: () { 45 | result = suggestions.elementAt(index); 46 | close(context, result); 47 | }, 48 | ); 49 | }, 50 | ); 51 | } 52 | 53 | @override 54 | Widget buildSuggestions(BuildContext context) { 55 | final suggestions = names.where((name) { 56 | return name.toLowerCase().contains(query.toLowerCase()); 57 | }); 58 | 59 | return ListView.builder( 60 | itemCount: suggestions.length, 61 | itemBuilder: (BuildContext context, int index) { 62 | return ListTile( 63 | title: Text( 64 | suggestions.elementAt(index), 65 | ), 66 | onTap: () { 67 | query = suggestions.elementAt(index); 68 | }, 69 | ); 70 | }, 71 | ); 72 | } 73 | } 74 | -------------------------------------------------------------------------------- /SharedPreference/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:shared_preferences/shared_preferences.dart'; 3 | 4 | void main() { 5 | runApp(MyApp()); 6 | } 7 | 8 | class MyApp extends StatelessWidget { 9 | @override 10 | Widget build(BuildContext context) { 11 | return MaterialApp( 12 | title: 'Shared Preferences', 13 | theme: ThemeData( 14 | primarySwatch: Colors.blue, 15 | visualDensity: VisualDensity.adaptivePlatformDensity, 16 | ), 17 | home: MyHomePage(title: 'Shared Preferences'), 18 | ); 19 | } 20 | } 21 | 22 | class MyHomePage extends StatefulWidget { 23 | MyHomePage({Key key, this.title}) : super(key: key); 24 | 25 | final String title; 26 | 27 | @override 28 | _MyHomePageState createState() => _MyHomePageState(); 29 | } 30 | 31 | class _MyHomePageState extends State { 32 | final counts = List(2); 33 | SharedPreferences pref; 34 | 35 | @override 36 | void initState() { 37 | super.initState(); 38 | 39 | counts[0] = 0; 40 | counts[1] = 0; 41 | 42 | SharedPreferences.getInstance().then((value) { 43 | setState(() { 44 | pref = value; 45 | 46 | if (pref.getInt('redButton') != null) { 47 | counts[0] = pref.getInt('redButton'); 48 | } 49 | if (pref.getInt('blueButton') != null) { 50 | counts[1] = pref.getInt('blueButton'); 51 | } 52 | 53 | }); 54 | }); 55 | } 56 | 57 | @override 58 | Widget build(BuildContext context) { 59 | return Scaffold( 60 | appBar: AppBar( 61 | title: Text(widget.title), 62 | ), 63 | body: Center( 64 | child: Column( 65 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 66 | children: [ 67 | RaisedButton( 68 | padding: EdgeInsets.symmetric(vertical: 50.0, horizontal: 100.0), 69 | onPressed: () { 70 | setState(() { 71 | counts[0] += 1; 72 | if (pref != null) { 73 | pref.setInt('redButton', counts[0]); 74 | } 75 | }); 76 | }, 77 | child: Text( 78 | '${counts[0]}', 79 | style: TextStyle(fontSize: 30.0), 80 | ), 81 | color: Colors.red, 82 | ), 83 | RaisedButton( 84 | padding: EdgeInsets.symmetric(vertical: 50.0, horizontal: 100.0), 85 | onPressed: () { 86 | setState(() { 87 | counts[1] += 1; 88 | if (pref != null) { 89 | pref.setInt('blueButton', counts[1]); 90 | } 91 | }); 92 | }, 93 | child: Text( 94 | '${counts[1]}', 95 | style: TextStyle(fontSize: 30.0), 96 | ), 97 | color: Colors.blue, 98 | ), 99 | ], 100 | ), 101 | ), 102 | ); 103 | } 104 | } 105 | -------------------------------------------------------------------------------- /Shimmer - Loading List/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:cloud_firestore/cloud_firestore.dart'; 2 | import 'package:flutter/material.dart'; 3 | import 'package:shimmer/shimmer.dart'; 4 | 5 | void main() { 6 | runApp(MyApp()); 7 | } 8 | 9 | class MyApp extends StatelessWidget { 10 | @override 11 | Widget build(BuildContext context) { 12 | return MaterialApp( 13 | title: 'Shimmer', 14 | theme: ThemeData( 15 | primarySwatch: Colors.blue, 16 | visualDensity: VisualDensity.adaptivePlatformDensity, 17 | ), 18 | home: MyHomePage(title: 'Shimmer Demo'), 19 | ); 20 | } 21 | } 22 | 23 | class MyHomePage extends StatefulWidget { 24 | MyHomePage({Key key, this.title}) : super(key: key); 25 | 26 | final String title; 27 | 28 | @override 29 | _MyHomePageState createState() => _MyHomePageState(); 30 | } 31 | 32 | class _MyHomePageState extends State { 33 | @override 34 | Widget build(BuildContext context) { 35 | return Scaffold( 36 | appBar: AppBar( 37 | title: Text(widget.title), 38 | ), 39 | body: StreamBuilder( 40 | stream: Firestore.instance.collection('songs').snapshots(), 41 | builder: (BuildContext context, AsyncSnapshot snapshot) { 42 | if (snapshot.hasData && snapshot.data.documents.isNotEmpty) { 43 | return ListView.builder( 44 | itemCount: snapshot.data.documents.length, 45 | itemBuilder: (context, index) { 46 | return Padding( 47 | padding: const EdgeInsets.all(8.0), 48 | child: ListTile( 49 | leading: Image.network( 50 | snapshot.data.documents.elementAt(index)['album_cover'], 51 | ), 52 | title: Text( 53 | snapshot.data.documents.elementAt(index)['title'], 54 | ), 55 | ), 56 | ); 57 | }, 58 | ); 59 | } else { 60 | return Shimmer.fromColors( 61 | child: ListView.builder( 62 | itemCount: 10, 63 | itemBuilder: (context, index) { 64 | return ListTile( 65 | leading: Icon(Icons.image, size: 50.0), 66 | title: SizedBox( 67 | child: Container( 68 | color: Colors.green, 69 | ), 70 | height: 20.0, 71 | ), 72 | ); 73 | }, 74 | ), 75 | baseColor: Colors.grey, 76 | highlightColor: Colors.teal, 77 | ); 78 | } 79 | }, 80 | ), 81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /Showing a Snackbar/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Snack Bar', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Snack Bar Demo'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | @override 29 | Widget build(BuildContext context) { 30 | return Scaffold( 31 | appBar: AppBar( 32 | title: Text(widget.title), 33 | ), 34 | body: Center( 35 | child: SnackbarLauncherButton(), 36 | ), 37 | ); 38 | } 39 | } 40 | 41 | class SnackbarLauncherButton extends StatelessWidget{ 42 | @override 43 | Widget build(BuildContext context) { 44 | return RaisedButton( 45 | child: Text('Launch Snackbar'), 46 | onPressed: (){ 47 | final snackbar = SnackBar( 48 | content: Text('Hey, thanks for launching me!!!', style: TextStyle(fontSize: 20),), 49 | action: SnackBarAction(label: 'Undo', 50 | onPressed: (){ 51 | debugPrint('Undo pressed.'); 52 | },), 53 | ); 54 | 55 | Scaffold.of(context).showSnackBar(snackbar); 56 | }, 57 | ); 58 | } 59 | 60 | } 61 | -------------------------------------------------------------------------------- /Slider/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() { 4 | runApp(MyApp()); 5 | } 6 | 7 | class MyApp extends StatelessWidget { 8 | @override 9 | Widget build(BuildContext context) { 10 | return MaterialApp( 11 | title: 'Slider Demo', 12 | theme: ThemeData( 13 | primarySwatch: Colors.blue, 14 | visualDensity: VisualDensity.adaptivePlatformDensity, 15 | ), 16 | home: MyHomePage(title: 'Slider Demo'), 17 | ); 18 | } 19 | } 20 | 21 | class MyHomePage extends StatefulWidget { 22 | MyHomePage({Key key, this.title}) : super(key: key); 23 | 24 | final String title; 25 | 26 | @override 27 | _MyHomePageState createState() => _MyHomePageState(); 28 | } 29 | 30 | class _MyHomePageState extends State { 31 | double sliderValue = 0.0; 32 | String sliderString = '0.0'; 33 | 34 | @override 35 | Widget build(BuildContext context) { 36 | return Scaffold( 37 | appBar: AppBar( 38 | title: Text(widget.title), 39 | ), 40 | body: Center( 41 | child: ClipRRect( 42 | borderRadius: BorderRadius.circular(25.0), 43 | child: Container( 44 | color: Colors.black, 45 | height: 50, 46 | child: Slider( 47 | value: sliderValue, 48 | min: 0, 49 | max: 100, 50 | divisions: 4, 51 | label: sliderString, 52 | onChanged: (value) { 53 | setState( 54 | () { 55 | sliderValue = value; 56 | sliderString = value.round().toString(); 57 | }, 58 | ); 59 | }, 60 | ), 61 | ), 62 | ), 63 | ), 64 | ); 65 | } 66 | } 67 | -------------------------------------------------------------------------------- /Smooth Star Rating/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:smooth_star_rating/smooth_star_rating.dart'; 3 | 4 | void main() { 5 | runApp(MyApp()); 6 | } 7 | 8 | class MyApp extends StatelessWidget { 9 | @override 10 | Widget build(BuildContext context) { 11 | return MaterialApp( 12 | title: 'Star Rating Demo', 13 | theme: ThemeData( 14 | primarySwatch: Colors.blue, 15 | visualDensity: VisualDensity.adaptivePlatformDensity, 16 | ), 17 | home: MyHomePage(title: 'Star Rating Demo'), 18 | ); 19 | } 20 | } 21 | 22 | class MyHomePage extends StatefulWidget { 23 | MyHomePage({Key key, this.title}) : super(key: key); 24 | 25 | final String title; 26 | 27 | @override 28 | _MyHomePageState createState() => _MyHomePageState(); 29 | } 30 | 31 | class _MyHomePageState extends State { 32 | static const List initialRating = [2, 3, 5, 4.5, 2.5]; 33 | 34 | @override 35 | Widget build(BuildContext context) { 36 | return Scaffold( 37 | appBar: AppBar( 38 | title: Text(widget.title), 39 | ), 40 | body: Center( 41 | child: PageView.builder( 42 | itemCount: 5, 43 | itemBuilder: (BuildContext context, int index) { 44 | return Stack( 45 | fit: StackFit.expand, 46 | children: [ 47 | Image.asset( 48 | 'assets/${index + 1}.jpg', 49 | fit: BoxFit.fill, 50 | gaplessPlayback: true, 51 | ), 52 | Align( 53 | alignment: Alignment.bottomRight, 54 | child: SmoothStarRating( 55 | size: 40.0, 56 | color: Colors.yellow, 57 | rating: initialRating[index], 58 | onRated: (double value) { 59 | debugPrint( 60 | 'Image no. $index was rated $value stars!!!'); 61 | }, 62 | borderColor: Colors.green, 63 | allowHalfRating: false, 64 | ), 65 | ), 66 | ], 67 | ); 68 | }), 69 | ), 70 | ); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /Splash Screen without external packages/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | import 'package:splash_screen/splash.dart'; 4 | 5 | void main() { 6 | WidgetsFlutterBinding.ensureInitialized(); 7 | SystemChrome.setEnabledSystemUIOverlays([]); 8 | runApp(MyApp()); 9 | } 10 | 11 | class MyApp extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return MaterialApp( 15 | title: 'Splash Screen', 16 | theme: ThemeData( 17 | primarySwatch: Colors.blue, 18 | visualDensity: VisualDensity.adaptivePlatformDensity, 19 | ), 20 | debugShowCheckedModeBanner: false, 21 | home: SplashScreen( 22 | future: Future.delayed(Duration(seconds: 4)), 23 | navigateTo: MyHomePage( 24 | title: 'Home Screen', 25 | ), 26 | ), 27 | ); 28 | } 29 | } 30 | 31 | class MyHomePage extends StatefulWidget { 32 | MyHomePage({Key key, this.title}) : super(key: key); 33 | 34 | final String title; 35 | 36 | @override 37 | _MyHomePageState createState() => _MyHomePageState(); 38 | } 39 | 40 | class _MyHomePageState extends State { 41 | @override 42 | Widget build(BuildContext context) { 43 | return Scaffold( 44 | appBar: AppBar( 45 | title: Text(widget.title), 46 | ), 47 | body: Center( 48 | child: Text( 49 | widget.title, 50 | style: TextStyle(fontSize: 30), 51 | ), 52 | ), 53 | ); 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /Splash Screen without external packages/lib/splash.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class SplashScreen extends StatefulWidget { 4 | final Future future; 5 | final Widget navigateTo; 6 | 7 | SplashScreen({ 8 | Key key, 9 | @required this.future, 10 | @required this.navigateTo, 11 | }) : assert(future != null), 12 | assert(navigateTo != null), 13 | super(key: key); 14 | 15 | @override 16 | _SplashScreenState createState() => _SplashScreenState(); 17 | } 18 | 19 | class _SplashScreenState extends State 20 | with TickerProviderStateMixin { 21 | AnimationController controller; 22 | 23 | @override 24 | void initState() { 25 | super.initState(); 26 | 27 | controller = 28 | AnimationController(vsync: this, duration: Duration(milliseconds: 500)); 29 | 30 | controller.forward(); 31 | 32 | widget.future.then((_) { 33 | Navigator.of(context).pushReplacement(MaterialPageRoute( 34 | builder: (_) => widget.navigateTo, 35 | )); 36 | }); 37 | } 38 | 39 | @override 40 | void dispose() { 41 | controller.dispose(); 42 | super.dispose(); 43 | } 44 | 45 | @override 46 | Widget build(BuildContext context) { 47 | final animation = Tween(begin: 0.0, end: 1.0).animate(controller) 48 | ..addStatusListener((status) { 49 | if (status == AnimationStatus.completed) { 50 | controller.reverse(); 51 | } else if (status == AnimationStatus.dismissed) { 52 | controller.forward(); 53 | } 54 | }); 55 | 56 | return Scaffold( 57 | backgroundColor: Colors.black, 58 | body: Center( 59 | child: AnimatedBuilder( 60 | animation: animation, 61 | builder: (BuildContext context, Widget child) { 62 | return Opacity( 63 | opacity: animation.value, 64 | child: child, 65 | ); 66 | }, 67 | child: Image.network('https://lh3.googleusercontent.com/a-/AOh14GiH2FfWPKH5Z9FE98kYa3P-LuDDUPMR3B5U7g4X=s600-k-no-rp-mo'), 68 | ), 69 | ), 70 | ); 71 | } 72 | } 73 | -------------------------------------------------------------------------------- /StreamBuilder + Cloud Firestore + PageView/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:cloud_firestore/cloud_firestore.dart'; 2 | import 'package:flutter/material.dart'; 3 | 4 | void main() => runApp(MyApp()); 5 | 6 | class MyApp extends StatelessWidget { 7 | @override 8 | Widget build(BuildContext context) { 9 | return MaterialApp( 10 | title: 'Stream Builder + Cloud Firestore', 11 | theme: ThemeData( 12 | primarySwatch: Colors.blue, 13 | ), 14 | home: MyHomePage(title: 'Stream Builder + Cloud Firestore'), 15 | ); 16 | } 17 | } 18 | 19 | class MyHomePage extends StatefulWidget { 20 | MyHomePage({Key key, this.title}) : super(key: key); 21 | 22 | final String title; 23 | 24 | @override 25 | _MyHomePageState createState() => _MyHomePageState(); 26 | } 27 | 28 | class _MyHomePageState extends State { 29 | @override 30 | Widget build(BuildContext context) { 31 | return Scaffold( 32 | appBar: AppBar( 33 | title: Text(widget.title), 34 | ), 35 | body: StreamBuilder( 36 | stream: Firestore.instance.collection('songs').snapshots(), 37 | builder: 38 | (BuildContext context, AsyncSnapshot snapshot) { 39 | if (snapshot.hasData) { 40 | return PageView.builder( 41 | itemCount: snapshot.data.documents.length, 42 | itemBuilder: (BuildContext context, int index) { 43 | return Column( 44 | mainAxisAlignment: MainAxisAlignment.center, 45 | children: [ 46 | Image.network(snapshot.data.documents 47 | .elementAt(index)['album_cover']), 48 | Text( 49 | snapshot.data.documents.elementAt(index)['title'], 50 | style: TextStyle(fontSize: 30.0), 51 | ), 52 | Text( 53 | snapshot.data.documents.elementAt(index)['artist'], 54 | style: TextStyle(fontSize: 20.0), 55 | ), 56 | Text( 57 | snapshot.data.documents.elementAt(index)['album'], 58 | style: TextStyle(fontSize: 20.0), 59 | ), 60 | Text( 61 | snapshot.data.documents.elementAt(index)['year'], 62 | style: TextStyle(fontSize: 20.0), 63 | ), 64 | ], 65 | ); 66 | }, 67 | ); 68 | } else { 69 | debugPrint('Loading...'); 70 | return Center( 71 | child: Text('Loading...'), 72 | ); 73 | } 74 | }, 75 | )); 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /Typing Text Animation without external packages/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:flutter/services.dart'; 3 | 4 | void main() { 5 | WidgetsFlutterBinding.ensureInitialized(); 6 | SystemChrome.setEnabledSystemUIOverlays([]); 7 | runApp(MyApp()); 8 | } 9 | 10 | class MyApp extends StatelessWidget { 11 | @override 12 | Widget build(BuildContext context) { 13 | return MaterialApp( 14 | title: 'Typing Text Animation', 15 | theme: ThemeData.light(), 16 | darkTheme: ThemeData.dark().copyWith( 17 | scaffoldBackgroundColor: Colors.black, 18 | textTheme: TextTheme(bodyText2: TextStyle(fontSize: 25))), 19 | themeMode: ThemeMode.dark, 20 | debugShowCheckedModeBanner: false, 21 | home: MyHomePage(title: 'Typing Text Animation'), 22 | ); 23 | } 24 | } 25 | 26 | class MyHomePage extends StatefulWidget { 27 | MyHomePage({Key key, this.title}) : super(key: key); 28 | 29 | final String title; 30 | 31 | @override 32 | _MyHomePageState createState() => _MyHomePageState(); 33 | } 34 | 35 | class _MyHomePageState extends State 36 | with SingleTickerProviderStateMixin { 37 | // Strigns for the three widgets. 38 | final stringForTweenAnimationBuidler = 39 | 'From TweenAnimationBuilder'; 40 | final stringForAnimatedBuilder = 'From AnimatedBuidler'; 41 | final stringForTypingTextWidget = 'From TypingText'; 42 | 43 | // Single controller for AnimatedBuilder and TypingText. 44 | AnimationController controller; 45 | 46 | // Two animations for AnimatedBuilder and TypingText. 47 | Animation animationForAnimatedBuilder; 48 | Animation animationForTypingText; 49 | 50 | @override 51 | void initState() { 52 | super.initState(); 53 | controller = 54 | AnimationController(vsync: this, duration: Duration(seconds: 3)); 55 | 56 | animationForAnimatedBuilder = 57 | IntTween(begin: 0, end: stringForAnimatedBuilder.length) 58 | .animate(controller); 59 | animationForTypingText = 60 | IntTween(begin: 0, end: stringForTypingTextWidget.length) 61 | .animate(controller); 62 | } 63 | 64 | @override 65 | void dispose() { 66 | controller.dispose(); 67 | super.dispose(); 68 | } 69 | 70 | @override 71 | Widget build(BuildContext context) { 72 | return Scaffold( 73 | body: Center( 74 | child: Padding( 75 | padding: const EdgeInsets.all(20.0), 76 | child: Column( 77 | mainAxisAlignment: MainAxisAlignment.spaceAround, 78 | children: [ 79 | TweenAnimationBuilder( 80 | duration: const Duration(seconds: 3), 81 | tween: IntTween( 82 | begin: 0, end: stringForTweenAnimationBuidler.length), 83 | builder: (BuildContext context, int value, Widget child) { 84 | return Text( 85 | stringForTweenAnimationBuidler.substring(0, value)); 86 | }, 87 | ), 88 | AnimatedBuilder( 89 | animation: animationForAnimatedBuilder, 90 | builder: (BuildContext context, Widget child) { 91 | return Text(stringForAnimatedBuilder.substring( 92 | 0, animationForAnimatedBuilder.value)); 93 | }, 94 | ), 95 | TypingText( 96 | string: stringForTypingTextWidget, 97 | animation: animationForTypingText, 98 | ), 99 | ], 100 | ), 101 | ), 102 | ), 103 | floatingActionButton: FloatingActionButton( 104 | child: Icon(Icons.play_arrow_rounded), 105 | onPressed: () { 106 | controller.repeat(reverse: true); 107 | }, 108 | ), 109 | ); 110 | } 111 | } 112 | 113 | class TypingText extends AnimatedWidget { 114 | final String string; 115 | 116 | TypingText({this.string, Key key, Listenable animation}) 117 | : super(key: key, listenable: animation); 118 | 119 | @override 120 | Widget build(BuildContext context) { 121 | final animation = listenable as Animation; 122 | return Text(string.substring(0, animation.value)); 123 | } 124 | } 125 | -------------------------------------------------------------------------------- /Using Dismissible widget with ListView widget/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | void main() => runApp(MyApp()); 4 | 5 | class MyApp extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return MaterialApp( 9 | title: 'Dismissible List View', 10 | theme: ThemeData( 11 | primarySwatch: Colors.blue, 12 | ), 13 | home: MyHomePage(title: 'Dismissible List View'), 14 | ); 15 | } 16 | } 17 | 18 | class MyHomePage extends StatefulWidget { 19 | MyHomePage({Key key, this.title}) : super(key: key); 20 | 21 | final String title; 22 | 23 | @override 24 | _MyHomePageState createState() => _MyHomePageState(); 25 | } 26 | 27 | class _MyHomePageState extends State { 28 | final _myList = List(); 29 | int n = 0; 30 | 31 | @override 32 | Widget build(BuildContext context) { 33 | return Scaffold( 34 | appBar: AppBar( 35 | title: Text(widget.title), 36 | ), 37 | body: ListView.builder( 38 | itemCount: _myList.length, 39 | itemBuilder: (context, index) { 40 | return Dismissible( 41 | background: Container(color: Colors.blue,), 42 | secondaryBackground: Container(color: Colors.red,), 43 | onResize: (){ 44 | debugPrint('Being dismissed!!!'); 45 | }, 46 | onDismissed: (direction){ 47 | setState(() { 48 | _myList.removeAt(index); 49 | }); 50 | }, 51 | key: ValueKey(_myList.elementAt(index)), 52 | child: ListTile( 53 | title: Text(_myList.elementAt(index)), 54 | ), 55 | ); 56 | }), 57 | floatingActionButton: FloatingActionButton( 58 | child: Icon(Icons.add), 59 | onPressed: () { 60 | setState(() { 61 | _myList.add('Item $n'); 62 | ++n; 63 | }); 64 | }, 65 | ), 66 | ); 67 | } 68 | } 69 | -------------------------------------------------------------------------------- /ValueListenableBulder and ValueNotifier/lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | 3 | import 'package:flutter/material.dart'; 4 | 5 | void main() { 6 | runApp(MyApp()); 7 | } 8 | 9 | class MyApp extends StatelessWidget { 10 | @override 11 | Widget build(BuildContext context) { 12 | return MaterialApp( 13 | title: 'Value Listenable Builder', 14 | theme: ThemeData( 15 | primarySwatch: Colors.blue, 16 | visualDensity: VisualDensity.adaptivePlatformDensity, 17 | ), 18 | home: MyHomePage(title: 'Value Listenable Builder'), 19 | ); 20 | } 21 | } 22 | 23 | class MyHomePage extends StatefulWidget { 24 | MyHomePage({Key key, this.title}) : super(key: key); 25 | 26 | final String title; 27 | 28 | @override 29 | _MyHomePageState createState() => _MyHomePageState(); 30 | } 31 | 32 | class _MyHomePageState extends State { 33 | var rot = ValueNotifier(0); 34 | @override 35 | Widget build(BuildContext context) { 36 | return Scaffold( 37 | appBar: AppBar( 38 | title: Text(widget.title), 39 | ), 40 | body: Center( 41 | child: ValueListenableBuilder( 42 | valueListenable: rot, 43 | child: _getContainer(), 44 | builder: (context, n, c) { 45 | return Transform.rotate( 46 | angle: (n * (pi / 180)), 47 | child: c, 48 | ); 49 | }, 50 | ), 51 | ), 52 | floatingActionButton: FloatingActionButton( 53 | onPressed: () { 54 | rot.value += 30; 55 | if (rot.value >= 180) { 56 | rot.value = 0; 57 | } 58 | }, 59 | child: Icon(Icons.rotate_right), 60 | ), 61 | ); 62 | } 63 | 64 | Container _getContainer() { 65 | return Container( 66 | color: Colors.blue, 67 | height: 300.0, 68 | width: 300.0, 69 | ); 70 | } 71 | } 72 | -------------------------------------------------------------------------------- /readme.md: -------------------------------------------------------------------------------- 1 | # Flutter Basics 2 | 3 | --- 4 | 5 | #### This repo contains small and easy to understand code snippets for some of the basic flutter widgets. 6 | 7 | #### To run any of the examples 8 | 9 | - Download the lib folder for that example. 10 | 11 | - Create a default flutter demo project. 12 | 13 | - Replace the lib folder of your project with downloaded lib folder. 14 | 15 | - Build, run and pray that it works! 16 | 17 | #### If you have been living under a rock and don't know what flutter is 18 | 19 | - Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase. 20 | 21 | - For more info head on over to [flutter.dev](https://flutter.dev/). 22 | 23 | #### Didn't understand something 24 | 25 | - All the code is mostly self-explanatory but still if you have any doubt check this [channel](https://www.youtube.com/channel/UCgofYEUiBiD5lybABz5Kyag). 26 | 27 | --- 28 | 29 | Note: Some examples are based on external packages and Firebase. So they will not work straight out of the box. 30 | --------------------------------------------------------------------------------