├── images ├── ggggggggggggg.txt ├── 1.png ├── 2.png ├── 3.png ├── 4.png ├── 5.png ├── 6.png ├── 7.png ├── 8.png ├── a.png ├── b.png ├── c.png ├── d.png ├── font.png ├── logo.png ├── comment.png ├── emoji.png ├── monster.png ├── profil9.jpg ├── splash.png ├── Reactjs1.png ├── messanger.png ├── profile-6.jpg ├── profile-7.jpg ├── profile5.jpg ├── profile9.jpg ├── profile-3.jpeg ├── profile-4.jpeg └── profile-5.jpeg ├── lib ├── main.dart ├── Index.dart └── Pages │ ├── Shop.dart │ ├── Movie.dart │ ├── Search.dart │ ├── Account.dart │ ├── Home.dart │ └── HomePage.dart ├── pubspec.yaml └── README.md /images/ggggggggggggg.txt: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /images/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/1.png -------------------------------------------------------------------------------- /images/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/2.png -------------------------------------------------------------------------------- /images/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/3.png -------------------------------------------------------------------------------- /images/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/4.png -------------------------------------------------------------------------------- /images/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/5.png -------------------------------------------------------------------------------- /images/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/6.png -------------------------------------------------------------------------------- /images/7.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/7.png -------------------------------------------------------------------------------- /images/8.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/8.png -------------------------------------------------------------------------------- /images/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/a.png -------------------------------------------------------------------------------- /images/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/b.png -------------------------------------------------------------------------------- /images/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/c.png -------------------------------------------------------------------------------- /images/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/d.png -------------------------------------------------------------------------------- /images/font.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/font.png -------------------------------------------------------------------------------- /images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/logo.png -------------------------------------------------------------------------------- /images/comment.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/comment.png -------------------------------------------------------------------------------- /images/emoji.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/emoji.png -------------------------------------------------------------------------------- /images/monster.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/monster.png -------------------------------------------------------------------------------- /images/profil9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profil9.jpg -------------------------------------------------------------------------------- /images/splash.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/splash.png -------------------------------------------------------------------------------- /images/Reactjs1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/Reactjs1.png -------------------------------------------------------------------------------- /images/messanger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/messanger.png -------------------------------------------------------------------------------- /images/profile-6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile-6.jpg -------------------------------------------------------------------------------- /images/profile-7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile-7.jpg -------------------------------------------------------------------------------- /images/profile5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile5.jpg -------------------------------------------------------------------------------- /images/profile9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile9.jpg -------------------------------------------------------------------------------- /images/profile-3.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile-3.jpeg -------------------------------------------------------------------------------- /images/profile-4.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile-4.jpeg -------------------------------------------------------------------------------- /images/profile-5.jpeg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hmida71/Flutter-Instagram-Clone/HEAD/images/profile-5.jpeg -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | // ! Created By DZ-TM071 Cpy-R2021 ( 2021-09-23 ) 2 | import 'package:flutter/material.dart'; 3 | 4 | // Todo Pages ============== 5 | import 'Pages/HomePage.dart'; 6 | import 'Index.dart'; 7 | // Todo fin ================= 8 | void main() { 9 | runApp(InstagramClone()); 10 | } 11 | 12 | class InstagramClone extends StatelessWidget { 13 | const InstagramClone({Key? key}) : super(key: key); 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | return MaterialApp( 18 | debugShowCheckedModeBanner: false, 19 | home: HomePage(), 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /lib/Index.dart: -------------------------------------------------------------------------------- 1 | // ! Created By DZ-TM071 Cpy-R2021 ( 2021-09-23 ) 2 | 3 | import 'package:flutter/material.dart'; 4 | import 'package:instagram_clone/Pages/Home.dart'; 5 | 6 | class Index extends StatefulWidget { 7 | Index({Key? key}) : super(key: key); 8 | 9 | @override 10 | _IndexState createState() => _IndexState(); 11 | } 12 | 13 | class _IndexState extends State { 14 | List Pages = [ 15 | Text("hhhhhhhhhhhh\jj"), 16 | Text("999999999999999999\jj"), 17 | Text("zzzzzzzzzzzzzzz\jj"), 18 | ]; 19 | @override 20 | Widget build(BuildContext context) { 21 | return DefaultTabController( 22 | length: 3, 23 | initialIndex: 1, 24 | child: TabBarView( 25 | children: [ 26 | Center( 27 | child: Text( 28 | "Home", 29 | style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), 30 | ), 31 | ), 32 | Home(), 33 | Center( 34 | child: Text( 35 | "chat", 36 | style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold), 37 | ), 38 | ), 39 | ], 40 | ), 41 | ); 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: instagram_clone 2 | description: A new Flutter application. 3 | 4 | # The following line prevents the package from being accidentally published to 5 | # pub.dev using `pub publish`. This is preferred for private packages. 6 | publish_to: 'none' # Remove this line if you wish to publish to pub.dev 7 | 8 | # The following defines the version and build number for your application. 9 | # A version number is three numbers separated by dots, like 1.2.43 10 | # followed by an optional build number separated by a +. 11 | # Both the version and the builder number may be overridden in flutter 12 | # build by specifying --build-name and --build-number, respectively. 13 | # In Android, build-name is used as versionName while build-number used as versionCode. 14 | # Read more about Android versioning at https://developer.android.com/studio/publish/versioning 15 | # In iOS, build-name is used as CFBundleShortVersionString while build-number used as CFBundleVersion. 16 | # Read more about iOS versioning at 17 | # https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html 18 | version: 1.0.0+1 19 | 20 | environment: 21 | sdk: ">=2.12.0 <3.0.0" 22 | 23 | dependencies: 24 | dashed_circle: ^0.0.1 25 | flutter: 26 | sdk: flutter 27 | 28 | 29 | # The following adds the Cupertino Icons font to your application. 30 | # Use with the CupertinoIcons class for iOS style icons. 31 | cupertino_icons: ^1.0.2 32 | flutter_image_slideshow: ^0.1.1 33 | tiktoklikescroller: ^0.1.8 34 | flutter_native_splash: ^1.2.1 35 | flutter_launcher_icons: ^0.9.2 36 | 37 | dev_dependencies: 38 | flutter_test: 39 | sdk: flutter 40 | 41 | flutter_icons: 42 | android: "launcher_icon" 43 | ios: true 44 | image_path: "images/logo.png" 45 | 46 | flutter_native_splash: 47 | color: "#FFFFFF" 48 | image: images/splash.png 49 | 50 | # For information on the generic Dart part of this file, see the 51 | # following page: https://dart.dev/tools/pub/pubspec 52 | 53 | # The following section is specific to Flutter. 54 | flutter: 55 | 56 | # The following line ensures that the Material Icons font is 57 | # included with your application, so that you can use the icons in 58 | # the material Icons class. 59 | uses-material-design: true 60 | 61 | # To add assets to your application, add an assets section, like this: 62 | assets: 63 | - images/ 64 | # - images/a_dot_ham.jpeg 65 | 66 | # An image asset can refer to one or more resolution-specific "variants", see 67 | # https://flutter.dev/assets-and-images/#resolution-aware. 68 | 69 | # For details regarding adding assets from package dependencies, see 70 | # https://flutter.dev/assets-and-images/#from-packages 71 | 72 | # To add custom fonts to your application, add a fonts section here, 73 | # in this "flutter" section. Each entry in this list should have a 74 | # "family" key with the font family name, and a "fonts" key with a 75 | # list giving the asset and other descriptors for the font. For 76 | # example: 77 | fonts: 78 | - family: DancingScript 79 | fonts: 80 | - asset: fonts/DancingScript-Bold.ttf 81 | # - asset: fonts/Schyler-Italic.ttf 82 | # style: italic 83 | # - family: Trajan Pro 84 | # fonts: 85 | # - asset: fonts/TrajanPro.ttf 86 | # - asset: fonts/TrajanPro_Bold.ttf 87 | # weight: 700 88 | # 89 | # For details regarding fonts from package dependencies, 90 | # see https://flutter.dev/custom-fonts/#from-packages 91 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Flutter-Instagram-Clone-Challenge_ui 🔥 2 | 3 |

Project img :

4 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 31 | 32 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 |
Home screenSplash screen
27 | 28 | Css Logo 29 | 30 | 33 | 34 | Css Logo 35 | 36 |
47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 66 | 67 | 68 | 74 | 75 | 76 | 77 | 78 | 79 |
another imganother img
61 | 62 | Css Logo 63 | Css Logo 64 | 65 | 69 | 70 | Css Logo 71 | Css Logo 72 | 73 |
80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 98 | 99 | 100 | 101 |
another img
93 | 94 | Css Logo 95 | Css Logo 96 | 97 |
102 | 103 | 104 |
105 | 106 |

Note !! : Please include your photos to show

107 |

🐱‍👤 made with algeria 🖤 By DZ-TM071

108 | 109 | 110 | -------------------------------------------------------------------------------- /lib/Pages/Shop.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Shop extends StatefulWidget { 4 | Shop({Key? key}) : super(key: key); 5 | 6 | @override 7 | _ShopState createState() => _ShopState(); 8 | } 9 | 10 | class _ShopState extends State { 11 | @override 12 | Widget build(BuildContext context) { 13 | return Container( 14 | color: Colors.red, 15 | width: double.infinity, 16 | child: SingleChildScrollView( 17 | scrollDirection: Axis.vertical, 18 | child: Column( 19 | children: [ 20 | Container( 21 | child: Row( 22 | children: [ 23 | Expanded( 24 | child: Container( 25 | height: 200, 26 | decoration: BoxDecoration( 27 | // color: Colors.green, 28 | image: DecorationImage( 29 | image: AssetImage("images/a.png"), 30 | fit: BoxFit.cover, 31 | ), 32 | ), 33 | )), 34 | Expanded( 35 | child: Container( 36 | decoration: BoxDecoration( 37 | // color: Colors.green, 38 | image: DecorationImage( 39 | image: AssetImage("images/b.png"), 40 | fit: BoxFit.cover, 41 | ), 42 | ), 43 | height: 200, 44 | )) 45 | ], 46 | ), 47 | ), 48 | Container( 49 | child: Row( 50 | children: [ 51 | Expanded( 52 | child: Container( 53 | decoration: BoxDecoration( 54 | // color: Colors.green, 55 | image: DecorationImage( 56 | image: AssetImage("images/c.png"), 57 | fit: BoxFit.cover, 58 | ), 59 | ), 60 | height: 200, 61 | )), 62 | Expanded( 63 | child: Container( 64 | decoration: BoxDecoration( 65 | // color: Colors.green, 66 | image: DecorationImage( 67 | image: AssetImage("images/d.png"), 68 | fit: BoxFit.cover, 69 | ), 70 | ), 71 | height: 200, 72 | )) 73 | ], 74 | ), 75 | ), 76 | Container( 77 | child: Row( 78 | children: [ 79 | Expanded( 80 | child: Container( 81 | decoration: BoxDecoration( 82 | // color: Colors.green, 83 | image: DecorationImage( 84 | image: AssetImage("images/a.png"), 85 | fit: BoxFit.cover, 86 | ), 87 | ), 88 | height: 200, 89 | )), 90 | Expanded( 91 | child: Container( 92 | decoration: BoxDecoration( 93 | // color: Colors.green, 94 | image: DecorationImage( 95 | image: AssetImage("images/b.png"), 96 | fit: BoxFit.cover, 97 | ), 98 | ), 99 | height: 200, 100 | )) 101 | ], 102 | ), 103 | ), 104 | Container( 105 | child: Row( 106 | children: [ 107 | Expanded( 108 | child: Container( 109 | decoration: BoxDecoration( 110 | // color: Colors.green, 111 | image: DecorationImage( 112 | image: AssetImage("images/c.png"), 113 | fit: BoxFit.cover, 114 | ), 115 | ), 116 | height: 200, 117 | )), 118 | Expanded( 119 | child: Container( 120 | decoration: BoxDecoration( 121 | // color: Colors.green, 122 | image: DecorationImage( 123 | image: AssetImage("images/d.png"), 124 | fit: BoxFit.cover, 125 | ), 126 | ), 127 | height: 200, 128 | )) 129 | ], 130 | ), 131 | ), 132 | ], 133 | ), 134 | ), 135 | ); 136 | } 137 | } 138 | -------------------------------------------------------------------------------- /lib/Pages/Movie.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:tiktoklikescroller/tiktoklikescroller.dart'; 3 | 4 | class Movie extends StatefulWidget { 5 | Movie({Key? key}) : super(key: key); 6 | 7 | @override 8 | _MovieState createState() => _MovieState(); 9 | } 10 | 11 | class _MovieState extends State { 12 | final List colors = [ 13 | Colors.amberAccent, 14 | Colors.red, 15 | Colors.blue, 16 | Colors.green 17 | ]; 18 | final List slider = [ 19 | { 20 | "name": "sdschakib", 21 | "comment": "مواقع رهيبه لازم تجربها ...More", 22 | "color": Colors.orange 23 | }, 24 | { 25 | "name": "Dz Hmida", 26 | "comment": "instagram ni jayyyyy ! yeay", 27 | "color": Colors.yellow[300] 28 | }, 29 | { 30 | "name": "Abd Ben", 31 | "comment": "GG's Bro nice", 32 | "color": Colors.brown 33 | }, 34 | { 35 | "name": "Zako Blm", 36 | "comment": "ياااااااااا الخرااا ابلع ...More", 37 | "color": Colors.red 38 | }, 39 | ]; 40 | @override 41 | Widget build(BuildContext context) { 42 | return TikTokStyleFullPageScroller( 43 | contentSize: 4, 44 | // swipeThreshold: 0.2, 45 | // ^ the fraction of the screen needed to scroll 46 | swipeVelocityThreshold: 2000, 47 | // ^ the velocity threshold for smaller scrolls 48 | animationDuration: const Duration(milliseconds: 300), 49 | // ^ how long the animation will take 50 | // onScrollEvent: _handleCallbackEvent, 51 | // ^ registering our own function to listen to page changes 52 | builder: (BuildContext context, int index) { 53 | return Container( 54 | color: colors[index], 55 | width: double.infinity, 56 | height: double.maxFinite, 57 | margin: EdgeInsets.only(top: 50), 58 | child: Row( 59 | children: [ 60 | Expanded( 61 | child: Container( 62 | // color: Colors.brown, 63 | height: double.maxFinite, 64 | child: Column( 65 | mainAxisAlignment: MainAxisAlignment.end, 66 | crossAxisAlignment: CrossAxisAlignment.start, 67 | children: [ 68 | Row( 69 | children: [ 70 | Container( 71 | margin: EdgeInsets.only(left: 10, bottom: 5), 72 | child: CircleAvatar( 73 | backgroundColor: slider[index]['color'], 74 | ), 75 | ), 76 | Container( 77 | margin: EdgeInsets.only(left: 10), 78 | child: Text("${slider[index]['name']}"), 79 | ) 80 | ], 81 | ), 82 | Container( 83 | margin: EdgeInsets.only(left: 10, bottom: 10), 84 | child: Text("${slider[index]['comment']}")), 85 | Container( 86 | margin: EdgeInsets.only(left: 10, bottom: 10), 87 | child: Text("${slider[index]['name']} ~ Original Audio")), 88 | ], 89 | ), 90 | )), 91 | Expanded( 92 | child: Container( 93 | // color: Colors.red, 94 | height: double.maxFinite, 95 | child: Column( 96 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 97 | crossAxisAlignment: CrossAxisAlignment.end, 98 | children: [ 99 | IconButton( 100 | onPressed: () {}, 101 | icon: Icon( 102 | Icons.camera_alt_outlined, 103 | size: 35, 104 | )), 105 | Column( 106 | children: [ 107 | SizedBox( 108 | height: 5, 109 | ), 110 | IconButton( 111 | onPressed: () {}, 112 | icon: Icon( 113 | Icons.favorite_border, 114 | size: 30, 115 | )), 116 | SizedBox( 117 | height: 5, 118 | ), 119 | IconButton( 120 | onPressed: () {}, 121 | icon: Icon( 122 | Icons.comment_bank, 123 | size: 30, 124 | )), 125 | SizedBox( 126 | height: 5, 127 | ), 128 | IconButton( 129 | onPressed: () {}, 130 | icon: Icon( 131 | Icons.send_outlined, 132 | size: 30, 133 | )), 134 | SizedBox( 135 | height: 5, 136 | ), 137 | IconButton( 138 | onPressed: () {}, 139 | icon: Icon( 140 | Icons.more_vert, 141 | size: 30, 142 | )), 143 | SizedBox( 144 | height: 5, 145 | ), 146 | ], 147 | ) 148 | ], 149 | ), 150 | )), 151 | ], 152 | ), 153 | ); 154 | }); 155 | } 156 | 157 | void _handleCallbackEvent(ScrollEventType type, {required int currentIndex}) { 158 | print( 159 | "Scroll callback received with data: {type: $type, and index: $currentIndex}"); 160 | } 161 | } 162 | -------------------------------------------------------------------------------- /lib/Pages/Search.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Search extends StatefulWidget { 4 | Search({Key? key}) : super(key: key); 5 | 6 | @override 7 | _SearchState createState() => _SearchState(); 8 | } 9 | 10 | class _SearchState extends State { 11 | Future refresh() async { 12 | await Future.delayed(Duration(seconds: 2)); 13 | } 14 | 15 | @override 16 | Widget build(BuildContext context) { 17 | return RefreshIndicator( 18 | onRefresh: refresh, 19 | child: CustomScrollView( 20 | physics: const BouncingScrollPhysics(), 21 | slivers: [ 22 | SliverToBoxAdapter( 23 | child: Column( 24 | children: [ 25 | Container( 26 | height: 245, 27 | child: Row( 28 | children: [ 29 | Expanded( 30 | flex: 3, 31 | child: Container( 32 | width: double.infinity, 33 | height: 245, 34 | decoration: BoxDecoration( 35 | color: Colors.red, 36 | image: DecorationImage( 37 | image: AssetImage("images/4.png"), 38 | // fit: BoxFit.cover, 39 | ), 40 | ), 41 | child: null, 42 | ), 43 | ), 44 | Expanded( 45 | flex: 2, 46 | child: Container( 47 | width: double.infinity, 48 | height: 245, 49 | decoration: BoxDecoration( 50 | color: Colors.red, 51 | image: DecorationImage( 52 | image: AssetImage("images/3.png"), 53 | fit: BoxFit.cover, 54 | ), 55 | ), 56 | child: null, 57 | ), 58 | ) 59 | ], 60 | ), 61 | ), 62 | Container( 63 | height: 245, 64 | child: Row( 65 | children: [ 66 | Expanded( 67 | child: Container( 68 | width: double.infinity, 69 | height: 245, 70 | decoration: BoxDecoration( 71 | color: Colors.red, 72 | image: DecorationImage( 73 | image: AssetImage("images/6.png"), 74 | fit: BoxFit.cover, 75 | ), 76 | ), 77 | child: null, 78 | ), 79 | ), 80 | ], 81 | ), 82 | ), 83 | Container( 84 | height: 245, 85 | child: Row( 86 | children: [ 87 | Expanded( 88 | flex: 3, 89 | child: Container( 90 | width: double.infinity, 91 | height: 245, 92 | decoration: BoxDecoration( 93 | color: Colors.red, 94 | image: DecorationImage( 95 | image: AssetImage("images/4.png"), 96 | // fit: BoxFit.cover, 97 | ), 98 | ), 99 | child: null, 100 | ), 101 | ), 102 | Expanded( 103 | flex: 2, 104 | child: Container( 105 | width: double.infinity, 106 | height: 245, 107 | decoration: BoxDecoration( 108 | color: Colors.red, 109 | image: DecorationImage( 110 | image: AssetImage("images/3.png"), 111 | fit: BoxFit.cover, 112 | ), 113 | ), 114 | child: null, 115 | ), 116 | ) 117 | ], 118 | ), 119 | ), 120 | Container( 121 | height: 245, 122 | child: Row( 123 | children: [ 124 | Expanded( 125 | child: Container( 126 | width: double.infinity, 127 | height: 245, 128 | decoration: BoxDecoration( 129 | color: Colors.red, 130 | image: DecorationImage( 131 | image: AssetImage("images/7.png"), 132 | fit: BoxFit.cover, 133 | ), 134 | ), 135 | child: null, 136 | ), 137 | ), 138 | ], 139 | ), 140 | ), 141 | Container( 142 | height: 245, 143 | child: Row( 144 | children: [ 145 | Expanded( 146 | child: Container( 147 | width: double.infinity, 148 | height: 245, 149 | decoration: BoxDecoration( 150 | color: Colors.red, 151 | image: DecorationImage( 152 | image: AssetImage("images/8.png"), 153 | fit: BoxFit.cover, 154 | ), 155 | ), 156 | child: null, 157 | ), 158 | ), 159 | ], 160 | ), 161 | ), 162 | Container( 163 | color: Colors.blue, 164 | height: 600, 165 | width: double.infinity, 166 | child: Column( 167 | children: [ 168 | Row( 169 | children: [ 170 | Expanded( 171 | flex: 2, 172 | child: Container( 173 | color: Colors.red, 174 | height: 200, 175 | ), 176 | ), 177 | Expanded( 178 | flex: 1, 179 | child: Container( 180 | color: Colors.green, 181 | height: 200, 182 | ), 183 | ), 184 | ], 185 | ), 186 | Row( 187 | children: [ 188 | Expanded( 189 | flex: 1, 190 | child: Container( 191 | color: Colors.yellow[100], 192 | height: 200, 193 | ), 194 | ), 195 | Expanded( 196 | flex: 1, 197 | child: Container( 198 | color: Colors.deepPurple, 199 | height: 200, 200 | ), 201 | ), 202 | Expanded( 203 | flex: 1, 204 | child: Container( 205 | color: Colors.brown, 206 | height: 200, 207 | ), 208 | ), 209 | ], 210 | ), 211 | ], 212 | ), 213 | ), 214 | ], 215 | ), 216 | ), 217 | ], 218 | )); 219 | } 220 | } 221 | -------------------------------------------------------------------------------- /lib/Pages/Account.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Account extends StatefulWidget { 4 | Account({Key? key}) : super(key: key); 5 | 6 | @override 7 | _AccountState createState() => _AccountState(); 8 | } 9 | 10 | class _AccountState extends State { 11 | // ! ======================= 12 | List follower = [ 13 | { 14 | "img": "images/profil6.jpg", 15 | "name": "Dz~Abd", 16 | "subname": "Follows You", 17 | "btnName": "Follow", 18 | }, 19 | { 20 | "img": "images/profil2.jpg", 21 | "name": "Zak Blm", 22 | "subname": "Follows You", 23 | "btnName": "Follow", 24 | }, 25 | { 26 | "img": "images/profile-5.jpeg", 27 | "name": "Macdonald 071", 28 | "subname": "Follows You", 29 | "btnName": "Follow", 30 | }, 31 | { 32 | "img": "images/profile-6.jpg", 33 | "name": "alixa", 34 | "subname": "Follows You", 35 | "btnName": "Follow", 36 | }, 37 | ]; 38 | Future refresh() async { 39 | await Future.delayed(Duration(seconds: 2)); 40 | } 41 | 42 | bool _canShowButton = true; 43 | void hideWidget() { 44 | setState(() { 45 | _canShowButton = !_canShowButton; 46 | }); 47 | } 48 | 49 | // ! ================================= 50 | @override 51 | Widget build(BuildContext context) { 52 | return DefaultTabController( 53 | length: 2, 54 | child: RefreshIndicator( 55 | onRefresh: refresh, 56 | child: CustomScrollView( 57 | physics: const BouncingScrollPhysics(), 58 | slivers: [ 59 | SliverToBoxAdapter( 60 | child: SafeArea( 61 | child: Container( 62 | color: Colors.white, 63 | child: Column( 64 | children: [ 65 | Row( 66 | children: [ 67 | Column( 68 | children: [ 69 | CircleAvatar( 70 | radius: 40, 71 | backgroundColor: Colors.blue, 72 | backgroundImage: 73 | AssetImage("images/profil.jpeg"), 74 | ), 75 | Container( 76 | margin: EdgeInsets.all(10), 77 | child: Text( 78 | "HMIDA MOSTA", 79 | style: TextStyle( 80 | fontSize: 16, 81 | fontWeight: FontWeight.bold), 82 | ), 83 | ) 84 | ], 85 | ), 86 | Expanded( 87 | child: Row( 88 | mainAxisAlignment: MainAxisAlignment.spaceAround, 89 | children: [ 90 | SizedBox( 91 | width: 10, 92 | ), 93 | Column( 94 | children: [ 95 | Container( 96 | margin: EdgeInsets.all(10), 97 | child: Text( 98 | "0", 99 | style: TextStyle( 100 | fontSize: 18, 101 | fontWeight: FontWeight.bold), 102 | ), 103 | ), 104 | Container( 105 | child: Text( 106 | "Posts", 107 | style: TextStyle(fontSize: 15), 108 | ), 109 | ), 110 | ], 111 | ), 112 | SizedBox( 113 | width: 10, 114 | ), 115 | Column( 116 | children: [ 117 | Container( 118 | margin: EdgeInsets.all(10), 119 | child: Text( 120 | "33", 121 | style: TextStyle( 122 | fontSize: 18, 123 | fontWeight: FontWeight.bold), 124 | ), 125 | ), 126 | Container( 127 | child: Text( 128 | "Followers", 129 | style: TextStyle(fontSize: 15), 130 | ), 131 | ), 132 | ], 133 | ), 134 | SizedBox( 135 | width: 10, 136 | ), 137 | Column( 138 | children: [ 139 | Container( 140 | margin: EdgeInsets.all(10), 141 | child: Text( 142 | "85", 143 | style: TextStyle( 144 | fontSize: 18, 145 | fontWeight: FontWeight.bold), 146 | ), 147 | ), 148 | Container( 149 | child: Text( 150 | "Following", 151 | style: TextStyle(fontSize: 15), 152 | ), 153 | ), 154 | ], 155 | ), 156 | SizedBox( 157 | width: 10, 158 | ), 159 | ], 160 | ), 161 | ) 162 | ], 163 | ), 164 | Row( 165 | children: [ 166 | Expanded( 167 | flex: 5, 168 | child: Container( 169 | margin: EdgeInsets.all(10), 170 | width: double.infinity, 171 | child: MaterialButton( 172 | onPressed: () {}, 173 | color: Colors.white, 174 | shape: RoundedRectangleBorder( 175 | side: BorderSide( 176 | width: 1, color: Colors.black38), 177 | borderRadius: 178 | BorderRadius.circular(10.0)), 179 | child: Text("Edit Profile"), 180 | ), 181 | )), 182 | Expanded( 183 | flex: 1, 184 | child: Container( 185 | margin: EdgeInsets.only( 186 | top: 10, bottom: 10, right: 10), 187 | width: double.infinity, 188 | child: MaterialButton( 189 | onPressed: () { 190 | hideWidget(); 191 | }, 192 | color: Colors.white, 193 | shape: RoundedRectangleBorder( 194 | side: BorderSide( 195 | width: 1, color: Colors.black38), 196 | borderRadius: 197 | BorderRadius.circular(10.0)), 198 | child: _canShowButton == true ? Icon(Icons.arrow_drop_down) : Icon(Icons.arrow_drop_up) , 199 | ), 200 | )), 201 | ], 202 | ), 203 | _canShowButton == true 204 | ? Column( 205 | children: [ 206 | Container( 207 | margin: EdgeInsets.all(10), 208 | child: Row( 209 | mainAxisAlignment: 210 | MainAxisAlignment.spaceBetween, 211 | children: [ 212 | Text( 213 | "Discover People", 214 | style: TextStyle( 215 | fontSize: 18, 216 | color: Colors.black, 217 | fontWeight: FontWeight.bold), 218 | ), 219 | Text( 220 | "See All", 221 | style: TextStyle( 222 | fontSize: 19, 223 | color: Colors.blue, 224 | ), 225 | ), 226 | ], 227 | ), 228 | ), 229 | Container( 230 | child: SingleChildScrollView( 231 | scrollDirection: Axis.horizontal, 232 | child: Row( 233 | children: [ 234 | ...List.generate(follower.length, 235 | (index) { 236 | return Card( 237 | margin: EdgeInsets.all(10), 238 | child: Container( 239 | width: 180, 240 | height: 230, 241 | child: Column( 242 | mainAxisAlignment: 243 | MainAxisAlignment.center, 244 | children: [ 245 | CircleAvatar( 246 | radius: 50, 247 | backgroundImage: AssetImage( 248 | "${follower[index]['img']}"), 249 | ), 250 | Container( 251 | margin: EdgeInsets.only( 252 | top: 5, bottom: 5), 253 | child: Text( 254 | "${follower[index]['name']}", 255 | style: TextStyle( 256 | fontSize: 19), 257 | )), 258 | Container( 259 | child: Text( 260 | "${follower[index]['subname']}", 261 | style: TextStyle( 262 | fontSize: 15, 263 | color: Colors.black54), 264 | )), 265 | MaterialButton( 266 | onPressed: () {}, 267 | child: Text( 268 | "${follower[index]['btnName']}"), 269 | textColor: Colors.white, 270 | color: Colors.blue, 271 | padding: 272 | EdgeInsets.symmetric( 273 | horizontal: 40), 274 | ) 275 | ], 276 | ), 277 | ), 278 | ); 279 | }) 280 | ], 281 | ), 282 | ), 283 | ) 284 | ], 285 | ) 286 | : Container(child: null), 287 | SizedBox( 288 | height: 20, 289 | ), 290 | ], 291 | ), 292 | ), 293 | ), 294 | ), 295 | SliverToBoxAdapter( 296 | child: TabBar( 297 | tabs: [ 298 | Tab( 299 | child: Icon( 300 | Icons.calendar_view_month, 301 | size: 25, 302 | color: Colors.black54, 303 | )), 304 | Tab( 305 | child: Icon( 306 | Icons.person_outline, 307 | size: 25, 308 | color: Colors.black54, 309 | )), 310 | ], 311 | ), 312 | ), 313 | SliverFillRemaining( 314 | child: TabBarView( 315 | children: [ 316 | Center( 317 | child: Text( 318 | "Profile", 319 | style: 320 | TextStyle(fontSize: 20, fontWeight: FontWeight.bold), 321 | ), 322 | ), 323 | Center( 324 | child: Text( 325 | "Amis Times", 326 | style: 327 | TextStyle(fontSize: 20, fontWeight: FontWeight.bold), 328 | ), 329 | ), 330 | ], 331 | ), 332 | ), 333 | ], 334 | ), 335 | ), 336 | ); 337 | } 338 | } 339 | -------------------------------------------------------------------------------- /lib/Pages/Home.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:dashed_circle/dashed_circle.dart'; 3 | import 'package:flutter_image_slideshow/flutter_image_slideshow.dart'; 4 | 5 | class Home extends StatefulWidget { 6 | Home({Key? key}) : super(key: key); 7 | 8 | @override 9 | _HomeState createState() => _HomeState(); 10 | } 11 | 12 | class _HomeState extends State with SingleTickerProviderStateMixin { 13 | // ! Donger Zonee =========================== 14 | /// Variables 15 | late Animation gap; 16 | Animation? base; 17 | Animation? reverse; 18 | late AnimationController controller; 19 | 20 | /// Init 21 | @override 22 | void initState() { 23 | super.initState(); 24 | controller = 25 | AnimationController(vsync: this, duration: Duration(seconds: 4)); 26 | base = CurvedAnimation(parent: controller, curve: Curves.easeOut); 27 | reverse = Tween(begin: 1.0, end: 1.0).animate(base!); 28 | gap = Tween(begin: 10.0, end: 0.0).animate(base!) 29 | ..addListener(() { 30 | setState(() {}); 31 | }); 32 | controller.forward(); 33 | } 34 | 35 | /// Dispose 36 | @override 37 | void dispose() { 38 | controller.dispose(); 39 | super.dispose(); 40 | } 41 | 42 | Future refresh() async { 43 | await Future.delayed(Duration(seconds: 2)); 44 | } 45 | 46 | // ! ============================= 47 | // Todo ========================= 48 | List story = [ 49 | { 50 | "name": "Hicham.DN", 51 | "img": "images/profile-4.jpeg", 52 | "color": Colors.orange 53 | }, 54 | {"name": "Zak Blm", "img": "images/profil2.jpg", "color": Colors.blue}, 55 | {"name": "Abd ben", "img": "images/profil7.jpg", "color": Colors.pink}, 56 | {"name": "Amine dz", "img": "images/profil3.jpg", "color": Colors.purple}, 57 | {"name": "BK Nes", "img": "images/profil9.jpg", "color": Colors.yellow}, 58 | { 59 | "name": "Hmida.071", 60 | "img": "images/profil.jpeg", 61 | "color": Colors.orange[300] 62 | }, 63 | { 64 | "name": "Snousi Elbay", 65 | "img": "images/profil4.jpg", 66 | "color": Colors.blue[200] 67 | }, 68 | { 69 | "name": "Macdonald.2 ", 70 | "img": "images/profile-5.jpeg", 71 | "color": Colors.purple[100] 72 | }, 73 | { 74 | "name": "Nadir Larbi", 75 | "img": "images/profil7.jpg", 76 | "color": Colors.pink[200] 77 | }, 78 | { 79 | "name": "Jessica Macdonald", 80 | "img": "images/profil9.jpg", 81 | "color": Colors.yellow[300] 82 | }, 83 | ]; 84 | List posts = [ 85 | { 86 | "name": "Reactjs1", 87 | "subname": "Donald Trump Headquarters", 88 | "logo": "images/monster.png", 89 | "img1": "images/Reactjs1.png", 90 | "img2": "images/profil.jpeg", 91 | "img3": "images/profil2.jpg", 92 | "likes": "1,821", 93 | "comment": "Which shortcuts do you use the most", 94 | "commentNumber": "12", 95 | "TimePost": "5", 96 | }, 97 | { 98 | "name": "Shubam_IosDev", 99 | "subname": "From NewYork City", 100 | "logo": "images/profile-3.jpeg", 101 | "img1": "images/profile-3.jpeg", 102 | "img2": "images/profile-5.jpeg", 103 | "img3": "images/profile-3.jpeg", 104 | "likes": "6,321", 105 | "comment": "Have A nice Day yeay ❤🎉👌🙌😁 !", 106 | "commentNumber": "600", 107 | "TimePost": "6", 108 | }, 109 | { 110 | "name": "Danuced jumla", 111 | "subname": "London City", 112 | "logo": "images/profile9.jpg", 113 | "img1": "images/profile-7.jpg", 114 | "img2": "images/profile9.jpg", 115 | "img3": "images/profile5.jpg", 116 | "likes": "98,210", 117 | "comment": "It's Cool BB Thnks For All Likes 😘💖🎶✔ ", 118 | "commentNumber": "546", 119 | "TimePost": "9", 120 | }, 121 | { 122 | "name": "Himda Dz", 123 | "subname": "Algeria Lover 💖", 124 | "logo": "images/profil.jpeg", 125 | "img1": "images/profil.jpeg", 126 | "img2": "images/profil3.jpg", 127 | "img3": "images/profil4.jpg", 128 | "likes": "121,891", 129 | "comment": "Instagram Rani Jay yoooo ✔✔", 130 | "commentNumber": "8912", 131 | "TimePost": "10.2", 132 | }, 133 | { 134 | "name": "Zako Dev's", 135 | "subname": "Pro Dev Like sangaaa", 136 | "logo": "images/profil2.jpg", 137 | "img1": "images/profil2.jpg", 138 | "img2": "images/profil99.jpg", 139 | "img3": "images/profil2.jpg", 140 | "likes": "56,821", 141 | "comment": "Yoo Les Bigoos 🎉👌🙌😁", 142 | "commentNumber": "6662", 143 | "TimePost": "13", 144 | }, 145 | ]; 146 | List follower = [ 147 | { 148 | "img": "images/profil6.jpg", 149 | "name": "Dz~Abd", 150 | "subname": "Follows You", 151 | "btnName": "Follows Back", 152 | }, 153 | { 154 | "img": "images/profil2.jpg", 155 | "name": "Zak Blm", 156 | "subname": "New in Instagarm", 157 | "btnName": "Follows Now", 158 | }, 159 | { 160 | "img": "images/profile-5.jpeg", 161 | "name": "Macdonald 071", 162 | "subname": "New To instagram", 163 | "btnName": "Follows", 164 | }, 165 | { 166 | "img": "images/profile-6.jpg", 167 | "name": "alixa", 168 | "subname": "Follows You", 169 | "btnName": "Follows Back", 170 | }, 171 | ]; 172 | 173 | var outlinedHome = Icons.home; 174 | var outlinedSearch = Icons.search_outlined; 175 | var outlinedMovie = Icons.movie_filter_outlined; 176 | var outlinedShop = Icons.shopping_bag_outlined; 177 | var outlinedbookmark = Icons.bookmark_border; 178 | var outlinedbookmark2 = Icons.bookmark_border; 179 | var outlinedbookmark3 = Icons.bookmark_border; 180 | var outlinedbookmark4 = Icons.bookmark_border; 181 | var outlinedbookmark5 = Icons.bookmark_border; 182 | var outlinedHeart = Icons.favorite_border; 183 | var outlinedHeart2 = Icons.favorite_border; 184 | var outlinedHeart3 = Icons.favorite_border; 185 | var outlinedHeart4 = Icons.favorite_border; 186 | var outlinedHeart5 = Icons.favorite_border; 187 | var colorHearts = Colors.black; 188 | var colorHearts2 = Colors.black; 189 | var colorHearts3 = Colors.black; 190 | var colorHearts4 = Colors.black; 191 | var colorHearts5 = Colors.black; 192 | var selectedIndex = 0; 193 | 194 | // Todo fin ========================= 195 | 196 | @override 197 | Widget build(BuildContext context) { 198 | return RefreshIndicator( 199 | onRefresh: refresh, 200 | child: CustomScrollView( 201 | physics: const BouncingScrollPhysics(), 202 | slivers: [ 203 | SliverToBoxAdapter( 204 | child: Container( 205 | // color: Colors.blue[200], 206 | child: Column( 207 | children: [ 208 | Container( 209 | width: double.infinity, 210 | height: 130, 211 | // color: Colors.orange, 212 | child: SingleChildScrollView( 213 | scrollDirection: Axis.horizontal, 214 | child: Row( 215 | children: [ 216 | Container( 217 | // color: Colors.red, 218 | width: 100, 219 | height: 100, 220 | child: Column( 221 | children: [ 222 | CircleAvatar( 223 | child: Container( 224 | // color: Colors.blue, 225 | margin: EdgeInsets.only(top: 40, left: 40), 226 | child: CircleAvatar( 227 | child: IconButton( 228 | onPressed: () {}, 229 | icon: Icon( 230 | Icons.add, 231 | ), 232 | color: Colors.white, 233 | iconSize: 16, 234 | ), 235 | ), 236 | ), 237 | radius: 35.0, 238 | backgroundImage: 239 | AssetImage('images/profil.jpeg'), 240 | ), 241 | Container( 242 | margin: EdgeInsets.only(top: 8), 243 | child: Text( 244 | "Your Story", 245 | style: TextStyle( 246 | fontWeight: FontWeight.bold), 247 | )) 248 | ], 249 | ), 250 | ), 251 | ...List.generate(10, (index) { 252 | return Column(children: [ 253 | Container( 254 | width: 80, 255 | height: 80, 256 | margin: 257 | EdgeInsets.only(left: 8, right: 8, top: 8), 258 | child: RotationTransition( 259 | turns: base!, 260 | child: DashedCircle( 261 | gapSize: gap.value, 262 | dashes: 40, 263 | color: story[index]['color'], 264 | child: RotationTransition( 265 | turns: reverse!, 266 | child: Padding( 267 | padding: const EdgeInsets.all(5.0), 268 | child: CircleAvatar( 269 | radius: 80.0, 270 | backgroundImage: AssetImage( 271 | '${story[index]['img']}'), 272 | ), 273 | ), 274 | ), 275 | ), 276 | ), 277 | ), 278 | Container( 279 | margin: EdgeInsets.only(top: 5), 280 | child: Text("${story[index]['name']}")) 281 | ]); 282 | }), 283 | ], 284 | ), 285 | ), 286 | ), 287 | Container( 288 | // margin: EdgeInsets.only(top: 15), 289 | width: double.infinity, 290 | // height: double.maxFinite, 291 | // color: Colors.green[200], 292 | child: Column( 293 | children: [ 294 | Divider( 295 | height: 2, 296 | color: Colors.black54, 297 | ), 298 | Container( 299 | // color: Colors.red[200], 300 | width: double.infinity, 301 | height: 300, 302 | child: Column( 303 | children: [ 304 | Container( 305 | margin: EdgeInsets.all(10), 306 | child: Row( 307 | mainAxisAlignment: 308 | MainAxisAlignment.spaceBetween, 309 | children: [ 310 | Text( 311 | "Suggested For you", 312 | style: TextStyle( 313 | fontSize: 21, 314 | color: Colors.black, 315 | fontWeight: FontWeight.bold), 316 | ), 317 | Text( 318 | "See All", 319 | style: TextStyle( 320 | fontSize: 19, 321 | color: Colors.blue, 322 | ), 323 | ), 324 | ], 325 | ), 326 | ), 327 | Container( 328 | child: SingleChildScrollView( 329 | scrollDirection: Axis.horizontal, 330 | child: Row( 331 | children: [ 332 | ...List.generate(follower.length, 333 | (index) { 334 | return Card( 335 | margin: EdgeInsets.all(10), 336 | child: Container( 337 | width: 180, 338 | height: 230, 339 | child: Column( 340 | mainAxisAlignment: 341 | MainAxisAlignment.center, 342 | children: [ 343 | CircleAvatar( 344 | radius: 60, 345 | backgroundImage: AssetImage( 346 | "${follower[index]['img']}"), 347 | ), 348 | Container( 349 | margin: EdgeInsets.only( 350 | top: 5, bottom: 5), 351 | child: Text( 352 | "${follower[index]['name']}", 353 | style: TextStyle( 354 | fontSize: 19), 355 | )), 356 | Container( 357 | child: Text( 358 | "${follower[index]['subname']}", 359 | style: TextStyle( 360 | fontSize: 15, 361 | color: Colors.black54), 362 | )), 363 | MaterialButton( 364 | onPressed: () {}, 365 | child: Text( 366 | "${follower[index]['btnName']}"), 367 | textColor: Colors.white, 368 | color: Colors.blue, 369 | padding: EdgeInsets.symmetric( 370 | horizontal: 40), 371 | ) 372 | ], 373 | ), 374 | ), 375 | ); 376 | }) 377 | ], 378 | ), 379 | ), 380 | ) 381 | ], 382 | ), 383 | ), 384 | ...List.generate(posts.length, (index) { 385 | return Container( 386 | margin: EdgeInsets.only(top: 15), 387 | // color: Colors.brown, 388 | child: Column( 389 | crossAxisAlignment: CrossAxisAlignment.start, 390 | children: [ 391 | Divider( 392 | height: 2, 393 | color: Colors.black54, 394 | ), 395 | ListTile( 396 | isThreeLine: false, 397 | title: Text("${posts[index]['name']}"), 398 | subtitle: Text("${posts[index]['subname']}"), 399 | trailing: InkWell( 400 | onTap: () {}, 401 | child: Icon(Icons.more_vert), 402 | ), 403 | leading: Container( 404 | width: 50, 405 | height: 50, 406 | child: CircleAvatar( 407 | radius: 50.0, 408 | backgroundImage: 409 | AssetImage('${posts[index]['logo']}'), 410 | ), 411 | ), 412 | ), 413 | ImageSlideshow( 414 | width: double.infinity, 415 | height: 400, 416 | initialPage: 0, 417 | indicatorColor: Colors.blue, 418 | indicatorBackgroundColor: Colors.grey, 419 | children: [ 420 | Image.asset( 421 | '${posts[index]['img1']}', 422 | fit: BoxFit.cover, 423 | ), 424 | Image.asset( 425 | '${posts[index]['img2']}', 426 | fit: BoxFit.cover, 427 | ), 428 | Image.asset( 429 | '${posts[index]['img3']}', 430 | fit: BoxFit.cover, 431 | ), 432 | ], 433 | 434 | onPageChanged: (value) { 435 | print('Page changed: $value'); 436 | }, 437 | // autoPlayInterval: 3000, 438 | ), 439 | Container( 440 | margin: EdgeInsets.only( 441 | top: 10, left: 10, right: 10), 442 | padding: EdgeInsets.all(0), 443 | child: Row( 444 | mainAxisAlignment: 445 | MainAxisAlignment.spaceBetween, 446 | children: [ 447 | Row( 448 | children: [ 449 | index == 0 450 | ? IconButton( 451 | onPressed: () { 452 | setState(() { 453 | outlinedHeart = 454 | Icons.favorite; 455 | colorHearts = Colors.red; 456 | }); 457 | }, 458 | icon: Icon( 459 | outlinedHeart, 460 | size: 30, 461 | color: colorHearts, 462 | )) 463 | : index == 1 464 | ? IconButton( 465 | onPressed: () { 466 | setState(() { 467 | outlinedHeart2 = 468 | Icons.favorite; 469 | colorHearts2 = 470 | Colors.red; 471 | }); 472 | }, 473 | icon: Icon( 474 | outlinedHeart2, 475 | size: 30, 476 | color: colorHearts2, 477 | )) 478 | : index == 2 479 | ? IconButton( 480 | onPressed: () { 481 | setState(() { 482 | outlinedHeart3 = 483 | Icons 484 | .favorite; 485 | colorHearts3 = 486 | Colors.red; 487 | }); 488 | }, 489 | icon: Icon( 490 | outlinedHeart3, 491 | size: 30, 492 | color: colorHearts3, 493 | )) 494 | : index == 3 495 | ? IconButton( 496 | onPressed: () { 497 | setState(() { 498 | outlinedHeart4 = 499 | Icons 500 | .favorite; 501 | colorHearts4 = 502 | Colors 503 | .red; 504 | }); 505 | }, 506 | icon: Icon( 507 | outlinedHeart4, 508 | size: 30, 509 | color: 510 | colorHearts4, 511 | )) 512 | : index == 4 513 | ? IconButton( 514 | onPressed: 515 | () { 516 | setState( 517 | () { 518 | outlinedHeart5 = 519 | Icons 520 | .favorite; 521 | colorHearts5 = 522 | Colors 523 | .red; 524 | }); 525 | }, 526 | icon: Icon( 527 | outlinedHeart5, 528 | size: 30, 529 | color: 530 | colorHearts5, 531 | )) 532 | : IconButton( 533 | onPressed: 534 | () { 535 | setState( 536 | () { 537 | outlinedHeart = 538 | Icons 539 | .favorite; 540 | colorHearts = 541 | Colors 542 | .red; 543 | }); 544 | }, 545 | icon: Icon( 546 | outlinedHeart, 547 | size: 30, 548 | color: 549 | colorHearts, 550 | )), 551 | IconButton( 552 | onPressed: () {}, 553 | icon: Image.asset( 554 | "images/comment.png", 555 | height: 30, 556 | width: 30, 557 | ), 558 | ), 559 | IconButton( 560 | onPressed: () {}, 561 | icon: Icon( 562 | Icons.send_outlined, 563 | size: 30, 564 | )), 565 | ], 566 | ), 567 | index == 0 568 | ? IconButton( 569 | onPressed: () { 570 | setState(() { 571 | outlinedbookmark = 572 | Icons.bookmark; 573 | }); 574 | }, 575 | icon: Icon( 576 | outlinedbookmark, 577 | size: 30, 578 | )) 579 | : index == 1 580 | ? IconButton( 581 | onPressed: () { 582 | setState(() { 583 | outlinedbookmark2 = 584 | Icons.bookmark; 585 | }); 586 | }, 587 | icon: Icon( 588 | outlinedbookmark2, 589 | size: 30, 590 | )) 591 | : index == 2 592 | ? IconButton( 593 | onPressed: () { 594 | setState(() { 595 | outlinedbookmark3 = 596 | Icons.bookmark; 597 | }); 598 | }, 599 | icon: Icon( 600 | outlinedbookmark3, 601 | size: 30, 602 | )) 603 | : index == 3 604 | ? IconButton( 605 | onPressed: () { 606 | setState(() { 607 | outlinedbookmark4 = 608 | Icons 609 | .bookmark; 610 | }); 611 | }, 612 | icon: Icon( 613 | outlinedbookmark4, 614 | size: 30, 615 | )) 616 | : index == 4 617 | ? IconButton( 618 | onPressed: () { 619 | setState(() { 620 | outlinedbookmark5 = 621 | Icons 622 | .bookmark; 623 | }); 624 | }, 625 | icon: Icon( 626 | outlinedbookmark5, 627 | size: 30, 628 | )) 629 | : IconButton( 630 | onPressed: () { 631 | setState(() { 632 | outlinedbookmark = 633 | Icons 634 | .bookmark; 635 | }); 636 | }, 637 | icon: Icon( 638 | outlinedbookmark, 639 | size: 30, 640 | )), 641 | ], 642 | ), 643 | ), 644 | Container( 645 | margin: EdgeInsets.only(left: 20), 646 | child: Text( 647 | "${posts[index]['likes']} likes", 648 | style: 649 | TextStyle(fontWeight: FontWeight.bold), 650 | ), 651 | ), 652 | Container( 653 | margin: EdgeInsets.only(left: 20, top: 5), 654 | child: Row( 655 | children: [ 656 | Text( 657 | "${posts[index]['name']}", 658 | style: TextStyle( 659 | fontWeight: FontWeight.bold), 660 | ), 661 | SizedBox( 662 | width: 4, 663 | ), 664 | Text( 665 | "${posts[index]['comment']}", 666 | ), 667 | ], 668 | )), 669 | Container( 670 | margin: EdgeInsets.only(left: 20, top: 4), 671 | child: Text( 672 | "...more", 673 | style: TextStyle(color: Colors.black54), 674 | ), 675 | ), 676 | Container( 677 | margin: EdgeInsets.only(left: 20, top: 4), 678 | child: Text( 679 | "View All ${posts[index]['commentNumber']} comments", 680 | style: TextStyle(color: Colors.black54), 681 | ), 682 | ), 683 | ListTile( 684 | isThreeLine: false, 685 | title: Text("Add a comment..."), 686 | trailing: InkWell( 687 | onTap: () {}, 688 | child: Image.asset( 689 | "images/emoji.png", 690 | width: 80, 691 | ), 692 | ), 693 | leading: Container( 694 | width: 30, 695 | height: 30, 696 | child: CircleAvatar( 697 | radius: 30.0, 698 | backgroundImage: 699 | AssetImage('images/profil.jpeg'), 700 | ), 701 | ), 702 | ), 703 | Container( 704 | margin: EdgeInsets.only(left: 20, top: 4), 705 | child: Text( 706 | "${posts[index]['TimePost']} hours ago", 707 | style: TextStyle(color: Colors.black54), 708 | ), 709 | ), 710 | ], 711 | ), 712 | ); 713 | }), 714 | ], 715 | ), 716 | ), 717 | ], 718 | ), 719 | ), 720 | ), 721 | ], 722 | ), 723 | ); 724 | } 725 | } 726 | 727 | 728 | 729 | -------------------------------------------------------------------------------- /lib/Pages/HomePage.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:instagram_clone/Pages/Account.dart'; 3 | import 'package:instagram_clone/Pages/Home.dart'; 4 | import 'package:instagram_clone/Pages/Movie.dart'; 5 | import 'package:instagram_clone/Pages/Search.dart'; 6 | import 'package:instagram_clone/Pages/Shop.dart'; 7 | 8 | class HomePage extends StatefulWidget { 9 | HomePage({Key? key}) : super(key: key); 10 | 11 | @override 12 | _HomePageState createState() => _HomePageState(); 13 | } 14 | 15 | class _HomePageState extends State 16 | with SingleTickerProviderStateMixin { 17 | // ! Dange Zone 18 | // variables 19 | var outlinedHome = Icons.home; 20 | var outlinedSearch = Icons.search_outlined; 21 | var outlinedMovie = Icons.movie_filter_outlined; 22 | var outlinedShop = Icons.shopping_bag_outlined; 23 | var outlinedbookmark = Icons.bookmark_border; 24 | var outlinedbookmark2 = Icons.bookmark_border; 25 | var outlinedbookmark3 = Icons.bookmark_border; 26 | var outlinedbookmark4 = Icons.bookmark_border; 27 | var outlinedbookmark5 = Icons.bookmark_border; 28 | var outlinedHeart = Icons.favorite_border; 29 | var outlinedHeart2 = Icons.favorite_border; 30 | var outlinedHeart3 = Icons.favorite_border; 31 | var outlinedHeart4 = Icons.favorite_border; 32 | var outlinedHeart5 = Icons.favorite_border; 33 | var colorHearts = Colors.black; 34 | var colorHearts2 = Colors.black; 35 | var colorHearts3 = Colors.black; 36 | var colorHearts4 = Colors.black; 37 | var colorHearts5 = Colors.black; 38 | var selectedIndex = 0; 39 | // Todo ? List Widget 40 | List widgetPage = [ 41 | Home(), 42 | Search(), 43 | Movie(), 44 | Shop(), 45 | Account(), 46 | ]; 47 | Future refresh() async { 48 | await Future.delayed(Duration(seconds: 2)); 49 | } 50 | 51 | List chat = [ 52 | {"name": "Abd Ben", "subname": "Active Now", "img": "images/profil6.jpg"}, 53 | {"name": "Zak Blm", "subname": "Offline Now", "img": "images/profil2.jpg"}, 54 | {"name": "snouci Dz", "subname": "Active Now", "img": "images/profil3.jpg"}, 55 | { 56 | "name": "Aminos Piza", 57 | "subname": "Offline Now", 58 | "img": "images/profil4.jpg" 59 | }, 60 | { 61 | "name": "Nadir Larbi", 62 | "subname": "Active Now", 63 | "img": "images/profil7.jpg" 64 | }, 65 | { 66 | "name": "jigo kika", 67 | "subname": "Offline Now", 68 | "img": "images/profil9.jpg" 69 | }, 70 | {"name": "Alice a", "subname": "Active Now", "img": "images/profil99.jpg"}, 71 | {"name": "Tiglong", "subname": "Offline Now", "img": "images/profil5.jpg"}, 72 | {"name": "hmida Dz", "subname": "Active Now", "img": "images/profil.jpeg"}, 73 | { 74 | "name": "Nadirlo sss", 75 | "subname": "Offline Now", 76 | "img": "images/profil7.jpg" 77 | }, 78 | {"name": "Boss Diga", "subname": "Active Now", "img": "images/profil6.jpg"}, 79 | {"name": "abde dz", "subname": "Offline Now", "img": "images/profil3.jpg"}, 80 | { 81 | "name": "joklitt 56", 82 | "subname": "Active Now", 83 | "img": "images/profil5.jpg" 84 | }, 85 | ]; 86 | // ? =============== 87 | 88 | @override 89 | Widget build(BuildContext context) { 90 | return DefaultTabController( 91 | length: 3, 92 | initialIndex: 1, 93 | child: TabBarView(children: [ 94 | Scaffold( 95 | body: Column( 96 | children: [ 97 | Expanded( 98 | child: Container( 99 | color: Colors.red, 100 | width: double.infinity, 101 | child: Container( 102 | margin: EdgeInsets.only(top: 50), 103 | child: Row( 104 | mainAxisAlignment: MainAxisAlignment.spaceBetween, 105 | crossAxisAlignment: CrossAxisAlignment.start, 106 | children: [ 107 | IconButton( 108 | onPressed: () {}, 109 | icon: Icon( 110 | Icons.settings, 111 | color: Colors.black87, 112 | )), 113 | IconButton( 114 | onPressed: () {}, 115 | icon: Icon( 116 | Icons.flash_off, 117 | color: Colors.black87, 118 | )), 119 | IconButton( 120 | onPressed: () {}, 121 | icon: Icon( 122 | Icons.close, 123 | color: Colors.black87, 124 | )), 125 | ], 126 | ), 127 | ), 128 | ), 129 | flex: 4), 130 | Expanded( 131 | child: Container( 132 | color: Colors.green[200], 133 | width: double.infinity, 134 | child: Container( 135 | child: Column( 136 | children: [ 137 | Row( 138 | mainAxisAlignment: MainAxisAlignment.center, 139 | children: [ 140 | CircleAvatar( 141 | backgroundColor: Colors.yellowAccent, 142 | radius: 20, 143 | ), 144 | SizedBox( 145 | width: 10, 146 | ), 147 | CircleAvatar( 148 | backgroundColor: Colors.red, 149 | radius: 30, 150 | ), 151 | SizedBox( 152 | width: 10, 153 | ), 154 | CircleAvatar( 155 | child: CircleAvatar( 156 | backgroundColor: Colors.red, 157 | radius: 40, 158 | ), 159 | backgroundColor: Colors.white, 160 | radius: 50, 161 | ), 162 | SizedBox( 163 | width: 10, 164 | ), 165 | CircleAvatar( 166 | backgroundColor: Colors.brown, 167 | radius: 30, 168 | ), 169 | SizedBox( 170 | width: 10, 171 | ), 172 | CircleAvatar( 173 | backgroundColor: Colors.purple, 174 | radius: 20, 175 | ), 176 | SizedBox( 177 | width: 10, 178 | ), 179 | ], 180 | ), 181 | Container( 182 | margin: EdgeInsets.only(top: 15), 183 | child: Row( 184 | mainAxisAlignment: 185 | MainAxisAlignment.spaceBetween, 186 | crossAxisAlignment: CrossAxisAlignment.start, 187 | children: [ 188 | IconButton( 189 | onPressed: () {}, 190 | icon: Icon( 191 | Icons.photo_album_outlined, 192 | color: Colors.black87, 193 | )), 194 | Container(margin: EdgeInsets.only(top: 18), child: Text("Story",style: TextStyle(fontSize: 18),)), 195 | IconButton( 196 | onPressed: () {}, 197 | icon: Icon( 198 | Icons.camera_alt_outlined, 199 | color: Colors.black87, 200 | )), 201 | ], 202 | ), 203 | ), 204 | ], 205 | ), 206 | ), 207 | ), 208 | flex: 1) 209 | ], 210 | ), 211 | ), 212 | Scaffold( 213 | appBar: selectedIndex == 0 214 | ? PreferredSize( 215 | preferredSize: Size.fromHeight(80.0), 216 | child: Container( 217 | alignment: Alignment.center, 218 | margin: EdgeInsets.only(top: 15), 219 | child: AppBar( 220 | elevation: 0, 221 | title: Container( 222 | margin: EdgeInsets.only(top: 10), 223 | child: Image.asset("images/font.png", width: 120)), 224 | backgroundColor: Colors.white, 225 | actions: [ 226 | IconButton( 227 | onPressed: () {}, 228 | icon: Icon( 229 | Icons.add_box_outlined, 230 | size: 30, 231 | color: Colors.black, 232 | )), 233 | SizedBox( 234 | width: 2, 235 | ), 236 | IconButton( 237 | onPressed: () {}, 238 | icon: Icon( 239 | Icons.favorite_border_outlined, 240 | size: 30, 241 | color: Colors.black, 242 | )), 243 | SizedBox( 244 | width: 2, 245 | ), 246 | IconButton( 247 | onPressed: () {}, 248 | icon: Image.asset( 249 | "images/messanger.png", 250 | height: 30, 251 | width: 30, 252 | ), 253 | ), 254 | SizedBox( 255 | width: 8, 256 | ), 257 | ], 258 | ), 259 | ), 260 | ) 261 | : selectedIndex == 1 262 | ? PreferredSize( 263 | preferredSize: Size.fromHeight(80.0), 264 | child: Container( 265 | alignment: Alignment.center, 266 | margin: EdgeInsets.only(top: 15), 267 | child: AppBar( 268 | elevation: 0, 269 | backgroundColor: Colors.white, 270 | title: Container( 271 | child: TextFormField( 272 | maxLines: 1, 273 | decoration: InputDecoration( 274 | filled: true, 275 | fillColor: Colors.grey[300], 276 | isDense: true, // important line 277 | contentPadding: EdgeInsets.fromLTRB(10, 10, 278 | 10, 0), // control your hints text size 279 | hintStyle: TextStyle( 280 | letterSpacing: 2, 281 | color: Colors.black54, 282 | ), 283 | prefixIcon: Icon( 284 | Icons.search, 285 | size: 30, 286 | ), 287 | hintText: ' Search', 288 | border: OutlineInputBorder( 289 | borderRadius: BorderRadius.circular(25.0), 290 | borderSide: BorderSide.none, 291 | ), 292 | ), 293 | ), 294 | ), 295 | ), 296 | ), 297 | ) 298 | : selectedIndex == 2 299 | ? null 300 | : selectedIndex == 3 301 | ? PreferredSize( 302 | preferredSize: Size.fromHeight(200.0), 303 | child: Container( 304 | color: Colors.white, 305 | child: Column( 306 | children: [ 307 | Container( 308 | alignment: Alignment.center, 309 | margin: EdgeInsets.only(top: 15), 310 | child: AppBar( 311 | elevation: 0, 312 | title: Container( 313 | margin: EdgeInsets.only(top: 10), 314 | child: Text( 315 | "Shop ", 316 | style: TextStyle( 317 | color: Colors.black, 318 | fontSize: 25, 319 | fontWeight: FontWeight.bold, 320 | letterSpacing: 1.5), 321 | )), 322 | backgroundColor: Colors.white, 323 | actions: [ 324 | IconButton( 325 | onPressed: () {}, 326 | icon: Icon( 327 | Icons 328 | .collections_bookmark_outlined, 329 | size: 30, 330 | color: Colors.black, 331 | )), 332 | SizedBox( 333 | width: 2, 334 | ), 335 | IconButton( 336 | onPressed: () {}, 337 | icon: Icon( 338 | Icons.menu, 339 | size: 30, 340 | color: Colors.black, 341 | )), 342 | SizedBox( 343 | width: 10, 344 | ), 345 | ], 346 | ), 347 | ), 348 | Container( 349 | color: Colors.white, 350 | margin: EdgeInsets.symmetric( 351 | horizontal: 20, vertical: 10), 352 | child: TextFormField( 353 | maxLines: 1, 354 | decoration: InputDecoration( 355 | filled: true, 356 | fillColor: Colors.grey[300], 357 | isDense: true, // important line 358 | contentPadding: EdgeInsets.fromLTRB( 359 | 10, 360 | 10, 361 | 10, 362 | 0), // control your hints text size 363 | hintStyle: TextStyle( 364 | letterSpacing: 1.5, 365 | color: Colors.black54, 366 | ), 367 | prefixIcon: Icon( 368 | Icons.search, 369 | size: 30, 370 | ), 371 | hintText: ' Search Shops ', 372 | border: OutlineInputBorder( 373 | borderRadius: 374 | BorderRadius.circular(25.0), 375 | borderSide: BorderSide.none, 376 | ), 377 | ), 378 | ), 379 | ), 380 | SingleChildScrollView( 381 | scrollDirection: Axis.horizontal, 382 | child: Row( 383 | children: [ 384 | Container( 385 | margin: EdgeInsets.symmetric( 386 | horizontal: 5), 387 | child: MaterialButton( 388 | onPressed: () {}, 389 | child: Text("Shops"), 390 | padding: EdgeInsets.symmetric( 391 | horizontal: 15), 392 | color: Colors.white, 393 | shape: RoundedRectangleBorder( 394 | side: BorderSide( 395 | width: 1, 396 | color: Colors.black38), 397 | borderRadius: 398 | BorderRadius.circular( 399 | 10.0)), 400 | ), 401 | ), 402 | Container( 403 | margin: EdgeInsets.symmetric( 404 | horizontal: 5), 405 | child: MaterialButton( 406 | onPressed: () {}, 407 | child: Text("Videos"), 408 | padding: EdgeInsets.symmetric( 409 | horizontal: 15), 410 | color: Colors.white, 411 | shape: RoundedRectangleBorder( 412 | side: BorderSide( 413 | width: 1, 414 | color: Colors.black38), 415 | borderRadius: 416 | BorderRadius.circular( 417 | 10.0)), 418 | ), 419 | ), 420 | Container( 421 | margin: EdgeInsets.symmetric( 422 | horizontal: 5), 423 | child: MaterialButton( 424 | onPressed: () {}, 425 | child: Text("Editor's Picks"), 426 | padding: EdgeInsets.symmetric( 427 | horizontal: 15), 428 | color: Colors.white, 429 | shape: RoundedRectangleBorder( 430 | side: BorderSide( 431 | width: 1, 432 | color: Colors.black38), 433 | borderRadius: 434 | BorderRadius.circular( 435 | 10.0)), 436 | ), 437 | ), 438 | Container( 439 | margin: EdgeInsets.symmetric( 440 | horizontal: 5), 441 | child: MaterialButton( 442 | onPressed: () {}, 443 | child: Text("Collections"), 444 | padding: EdgeInsets.symmetric( 445 | horizontal: 15), 446 | color: Colors.white, 447 | shape: RoundedRectangleBorder( 448 | side: BorderSide( 449 | width: 1, 450 | color: Colors.black38), 451 | borderRadius: 452 | BorderRadius.circular( 453 | 10.0)), 454 | ), 455 | ), 456 | Container( 457 | margin: EdgeInsets.symmetric( 458 | horizontal: 5), 459 | child: MaterialButton( 460 | onPressed: () {}, 461 | child: Text("Shoes"), 462 | padding: EdgeInsets.symmetric( 463 | horizontal: 15), 464 | color: Colors.white, 465 | shape: RoundedRectangleBorder( 466 | side: BorderSide( 467 | width: 1, 468 | color: Colors.black38), 469 | borderRadius: 470 | BorderRadius.circular( 471 | 10.0)), 472 | ), 473 | ), 474 | ], 475 | ), 476 | ), 477 | ], 478 | ), 479 | ), 480 | ) 481 | : selectedIndex == 4 482 | ? PreferredSize( 483 | preferredSize: Size.fromHeight(80.0), 484 | child: Container( 485 | alignment: Alignment.center, 486 | margin: EdgeInsets.only(top: 15), 487 | child: AppBar( 488 | elevation: 0, 489 | title: Container( 490 | // color: Colors.red, 491 | margin: EdgeInsets.only(top: 10), 492 | child: Row( 493 | children: [ 494 | Text( 495 | "hmida.071", 496 | style: TextStyle( 497 | color: Colors.black), 498 | ), 499 | Icon( 500 | Icons.arrow_drop_down, 501 | color: Colors.black, 502 | ) 503 | ], 504 | )), 505 | backgroundColor: Colors.white, 506 | actions: [ 507 | IconButton( 508 | onPressed: () {}, 509 | icon: Icon( 510 | Icons.add_box_outlined, 511 | size: 30, 512 | color: Colors.black, 513 | )), 514 | SizedBox( 515 | width: 2, 516 | ), 517 | IconButton( 518 | onPressed: () {}, 519 | icon: Icon( 520 | Icons.menu, 521 | size: 30, 522 | color: Colors.black, 523 | )), 524 | SizedBox( 525 | width: 10, 526 | ), 527 | ], 528 | ), 529 | ), 530 | ) 531 | : null, 532 | bottomNavigationBar: BottomNavigationBar( 533 | showSelectedLabels: false, // <-- HERE 534 | showUnselectedLabels: false, // <-- AND HERE 535 | // currentIndex: selectedIndex, 536 | // onTap: (index){print("$index");}, 537 | items: [ 538 | BottomNavigationBarItem( 539 | icon: IconButton( 540 | icon: Icon( 541 | outlinedHome, 542 | color: Colors.black, 543 | size: 27, 544 | ), 545 | onPressed: () { 546 | setState(() { 547 | outlinedHome = Icons.home; 548 | outlinedMovie = Icons.movie_filter_outlined; 549 | outlinedShop = Icons.shopping_bag_outlined; 550 | outlinedSearch = Icons.search_outlined; 551 | selectedIndex = 0; 552 | print("$selectedIndex"); 553 | }); 554 | }, 555 | ), 556 | label: "Home", 557 | ), 558 | BottomNavigationBarItem( 559 | icon: IconButton( 560 | icon: Icon( 561 | outlinedSearch, 562 | color: Colors.black, 563 | size: 27, 564 | ), 565 | onPressed: () { 566 | setState(() { 567 | outlinedSearch = Icons.search; 568 | outlinedHome = Icons.home_outlined; 569 | outlinedMovie = Icons.movie_filter_outlined; 570 | outlinedShop = Icons.shopping_bag_outlined; 571 | selectedIndex = 1; 572 | print("$selectedIndex"); 573 | }); 574 | }, 575 | ), 576 | label: "Search", 577 | ), 578 | BottomNavigationBarItem( 579 | icon: IconButton( 580 | icon: Icon( 581 | outlinedMovie, 582 | color: Colors.black, 583 | size: 27, 584 | ), 585 | onPressed: () { 586 | setState(() { 587 | outlinedMovie = Icons.movie_filter; 588 | outlinedSearch = Icons.search_outlined; 589 | outlinedHome = Icons.home_outlined; 590 | outlinedShop = Icons.shopping_bag_outlined; 591 | selectedIndex = 2; 592 | print("$selectedIndex"); 593 | }); 594 | }, 595 | ), 596 | label: "Movie", 597 | ), 598 | BottomNavigationBarItem( 599 | icon: IconButton( 600 | icon: Icon( 601 | outlinedShop, 602 | color: Colors.black, 603 | size: 27, 604 | ), 605 | onPressed: () { 606 | setState(() { 607 | outlinedShop = Icons.shopping_bag; 608 | outlinedMovie = Icons.movie_filter_outlined; 609 | outlinedHome = Icons.home_outlined; 610 | selectedIndex = 3; 611 | print("$selectedIndex"); 612 | }); 613 | }, 614 | ), 615 | label: "Shop", 616 | ), 617 | BottomNavigationBarItem( 618 | icon: InkWell( 619 | onTap: () { 620 | setState(() { 621 | selectedIndex = 4; 622 | print("$selectedIndex"); 623 | }); 624 | }, 625 | child: CircleAvatar( 626 | child: null, 627 | radius: 15.0, 628 | backgroundImage: AssetImage('images/profil.jpeg'), 629 | ), 630 | ), 631 | label: "Account", 632 | ), 633 | ]), 634 | body: widgetPage.elementAt(selectedIndex), 635 | ), 636 | Scaffold( 637 | appBar: AppBar( 638 | elevation: 0, 639 | title: Container( 640 | // color: Colors.red, 641 | margin: EdgeInsets.only(top: 10), 642 | child: Row( 643 | children: [ 644 | Icon( 645 | Icons.arrow_back, 646 | color: Colors.black, 647 | ), 648 | SizedBox( 649 | width: 10, 650 | ), 651 | Text( 652 | "hmida.071", 653 | style: TextStyle(color: Colors.black), 654 | ), 655 | SizedBox( 656 | width: 5, 657 | ), 658 | Icon( 659 | Icons.arrow_drop_down, 660 | color: Colors.black, 661 | ) 662 | ], 663 | )), 664 | backgroundColor: Colors.white, 665 | actions: [ 666 | IconButton( 667 | onPressed: () {}, 668 | icon: Icon( 669 | Icons.video_call_outlined, 670 | size: 30, 671 | color: Colors.black87, 672 | )), 673 | SizedBox( 674 | width: 2, 675 | ), 676 | IconButton( 677 | onPressed: () {}, 678 | icon: Icon( 679 | Icons.edit, 680 | size: 24, 681 | color: Colors.black87, 682 | )), 683 | SizedBox( 684 | width: 10, 685 | ), 686 | ], 687 | ), 688 | body: DefaultTabController( 689 | length: 3, 690 | child: RefreshIndicator( 691 | onRefresh: refresh, 692 | child: CustomScrollView( 693 | physics: const BouncingScrollPhysics(), 694 | slivers: [ 695 | SliverToBoxAdapter( 696 | child: SafeArea( 697 | child: Container( 698 | color: Colors.white, 699 | child: Column( 700 | children: [ 701 | Row( 702 | children: [ 703 | Expanded( 704 | flex: 1, 705 | child: Container( 706 | width: double.infinity, 707 | margin: EdgeInsets.symmetric( 708 | horizontal: 20, vertical: 10), 709 | child: TextFormField( 710 | maxLines: 1, 711 | decoration: InputDecoration( 712 | filled: true, 713 | fillColor: Colors.grey[300], 714 | isDense: true, // important line 715 | contentPadding: EdgeInsets.fromLTRB( 716 | 10, 717 | 10, 718 | 10, 719 | 0), // control your hints text size 720 | hintStyle: TextStyle( 721 | letterSpacing: 2, 722 | color: Colors.black54, 723 | ), 724 | prefixIcon: Icon( 725 | Icons.search, 726 | size: 30, 727 | ), 728 | hintText: ' Search', 729 | border: OutlineInputBorder( 730 | borderRadius: 731 | BorderRadius.circular(25.0), 732 | borderSide: BorderSide.none, 733 | ), 734 | ), 735 | ), 736 | ), 737 | ), 738 | ], 739 | ), 740 | SizedBox( 741 | height: 20, 742 | ), 743 | ], 744 | ), 745 | ), 746 | ), 747 | ), 748 | SliverToBoxAdapter( 749 | child: TabBar( 750 | tabs: [ 751 | Tab( 752 | child: Text( 753 | "Chats", 754 | style: TextStyle(fontSize: 18, color: Colors.black), 755 | )), 756 | Tab( 757 | child: Text( 758 | "Rooms", 759 | style: TextStyle(fontSize: 18, color: Colors.black), 760 | )), 761 | Tab( 762 | child: Text( 763 | "0 Requests", 764 | style: TextStyle(fontSize: 18, color: Colors.black), 765 | )), 766 | ], 767 | ), 768 | ), 769 | SliverFillRemaining( 770 | child: TabBarView( 771 | children: [ 772 | Container( 773 | child: SingleChildScrollView( 774 | child: Column( 775 | children: [ 776 | ...List.generate(10, (index) { 777 | return ListTile( 778 | onTap: () {}, 779 | isThreeLine: false, 780 | title: Text( 781 | "${chat[index]['name']}", 782 | style: TextStyle( 783 | fontSize: 20, 784 | fontWeight: FontWeight.bold), 785 | ), 786 | subtitle: Text("${chat[index]['subname']}"), 787 | trailing: IconButton( 788 | onPressed: () {}, 789 | icon: Icon(Icons.photo_camera), 790 | ), 791 | leading: CircleAvatar( 792 | backgroundImage: 793 | AssetImage("${chat[index]['img']}"), 794 | ), 795 | ); 796 | }) 797 | ], 798 | ), 799 | )), 800 | Center( 801 | child: Text( 802 | "Rooms", 803 | style: TextStyle( 804 | fontSize: 20, fontWeight: FontWeight.bold), 805 | ), 806 | ), 807 | Center( 808 | child: Text( 809 | "Requests", 810 | style: TextStyle( 811 | fontSize: 20, fontWeight: FontWeight.bold), 812 | ), 813 | ), 814 | ], 815 | ), 816 | ), 817 | ], 818 | ), 819 | ), 820 | ), 821 | ), 822 | ])); 823 | } 824 | } 825 | --------------------------------------------------------------------------------