├── ios ├── Flutter │ ├── Debug.xcconfig │ ├── Release.xcconfig │ └── AppFrameworkInfo.plist ├── Runner │ ├── Runner-Bridging-Header.h │ ├── Assets.xcassets │ │ ├── LaunchImage.imageset │ │ │ ├── LaunchImage.png │ │ │ ├── LaunchImage@2x.png │ │ │ ├── LaunchImage@3x.png │ │ │ ├── README.md │ │ │ └── Contents.json │ │ └── AppIcon.appiconset │ │ │ ├── Icon-App-20x20@1x.png │ │ │ ├── Icon-App-20x20@2x.png │ │ │ ├── Icon-App-20x20@3x.png │ │ │ ├── Icon-App-29x29@1x.png │ │ │ ├── Icon-App-29x29@2x.png │ │ │ ├── Icon-App-29x29@3x.png │ │ │ ├── Icon-App-40x40@1x.png │ │ │ ├── Icon-App-40x40@2x.png │ │ │ ├── Icon-App-40x40@3x.png │ │ │ ├── Icon-App-60x60@2x.png │ │ │ ├── Icon-App-60x60@3x.png │ │ │ ├── Icon-App-76x76@1x.png │ │ │ ├── Icon-App-76x76@2x.png │ │ │ ├── Icon-App-1024x1024@1x.png │ │ │ ├── Icon-App-83.5x83.5@2x.png │ │ │ └── Contents.json │ ├── AppDelegate.swift │ ├── Base.lproj │ │ ├── Main.storyboard │ │ └── LaunchScreen.storyboard │ └── Info.plist ├── Runner.xcworkspace │ ├── contents.xcworkspacedata │ └── xcshareddata │ │ ├── WorkspaceSettings.xcsettings │ │ └── IDEWorkspaceChecks.plist ├── Runner.xcodeproj │ ├── project.xcworkspace │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata │ │ │ ├── WorkspaceSettings.xcsettings │ │ │ └── IDEWorkspaceChecks.plist │ ├── xcshareddata │ │ └── xcschemes │ │ │ └── Runner.xcscheme │ └── project.pbxproj └── .gitignore ├── web ├── favicon.png ├── icons │ ├── Icon-192.png │ └── Icon-512.png ├── manifest.json └── index.html ├── screenshots ├── flow_cover.png ├── chat_view_large.png ├── chat_view_small.png ├── home_view_large.png ├── home_view_small.png ├── flutter_layout_1.png ├── flutter_layout_2.png ├── flutter_layout_3.png ├── flutter_layout_4.png ├── flutter_layout_5.png ├── flutter_layout_6.png ├── sample_layout_full.png └── android_alternative_layout.png ├── fonts ├── GoogleSans-Regular.ttf └── SansitaSwashed-Regular.ttf ├── android ├── gradle.properties ├── app │ ├── src │ │ ├── main │ │ │ ├── res │ │ │ │ ├── mipmap-hdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-mdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── mipmap-xxxhdpi │ │ │ │ │ └── ic_launcher.png │ │ │ │ ├── drawable │ │ │ │ │ └── launch_background.xml │ │ │ │ └── values │ │ │ │ │ └── styles.xml │ │ │ ├── kotlin │ │ │ │ └── com │ │ │ │ │ └── souvikbiswas │ │ │ │ │ └── responsive_design │ │ │ │ │ └── MainActivity.kt │ │ │ └── AndroidManifest.xml │ │ ├── debug │ │ │ └── AndroidManifest.xml │ │ └── profile │ │ │ └── AndroidManifest.xml │ └── build.gradle ├── gradle │ └── wrapper │ │ └── gradle-wrapper.properties ├── .gitignore ├── settings.gradle └── build.gradle ├── lib ├── layouts │ ├── res │ │ └── my_colors.dart │ ├── media_query_layout.dart │ ├── aspect_ratio_layout.dart │ ├── orientation_builder_layout.dart │ ├── layout_builder_layout.dart │ ├── fractionally_sized_box_layout.dart │ └── expanded_flexible_layout.dart ├── flow │ ├── res │ │ └── custom_colors.dart │ ├── fragments │ │ ├── contact_view.dart │ │ ├── bookmark_view.dart │ │ ├── people_view.dart │ │ ├── destination_view.dart │ │ ├── chat_view_small.dart │ │ ├── home_view_large.dart │ │ ├── chat_view_large.dart │ │ └── home_view_small.dart │ ├── model │ │ └── destination.dart │ ├── widgets │ │ ├── contact_view │ │ │ ├── contact_list.dart │ │ │ └── contact_item.dart │ │ ├── bookmark_view │ │ │ ├── bookmark_list.dart │ │ │ └── bookmark_item.dart │ │ ├── chat_view │ │ │ ├── chat_list.dart │ │ │ └── chat_item.dart │ │ ├── people_view │ │ │ ├── people_list.dart │ │ │ └── people_item.dart │ │ ├── text_view.dart │ │ ├── send_widget.dart │ │ └── menu_widget.dart │ └── screens │ │ ├── chat_page.dart │ │ └── flow_home_page.dart ├── main.dart └── home_page.dart ├── pubspec.yaml ├── .gitignore ├── LICENSE ├── pubspec.lock └── README.md /ios/Flutter/Debug.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /ios/Flutter/Release.xcconfig: -------------------------------------------------------------------------------- 1 | #include "Generated.xcconfig" 2 | -------------------------------------------------------------------------------- /ios/Runner/Runner-Bridging-Header.h: -------------------------------------------------------------------------------- 1 | #import "GeneratedPluginRegistrant.h" 2 | -------------------------------------------------------------------------------- /web/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/web/favicon.png -------------------------------------------------------------------------------- /web/icons/Icon-192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/web/icons/Icon-192.png -------------------------------------------------------------------------------- /web/icons/Icon-512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/web/icons/Icon-512.png -------------------------------------------------------------------------------- /screenshots/flow_cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flow_cover.png -------------------------------------------------------------------------------- /fonts/GoogleSans-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/fonts/GoogleSans-Regular.ttf -------------------------------------------------------------------------------- /screenshots/chat_view_large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/chat_view_large.png -------------------------------------------------------------------------------- /screenshots/chat_view_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/chat_view_small.png -------------------------------------------------------------------------------- /screenshots/home_view_large.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/home_view_large.png -------------------------------------------------------------------------------- /screenshots/home_view_small.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/home_view_small.png -------------------------------------------------------------------------------- /fonts/SansitaSwashed-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/fonts/SansitaSwashed-Regular.ttf -------------------------------------------------------------------------------- /screenshots/flutter_layout_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flutter_layout_1.png -------------------------------------------------------------------------------- /screenshots/flutter_layout_2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flutter_layout_2.png -------------------------------------------------------------------------------- /screenshots/flutter_layout_3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flutter_layout_3.png -------------------------------------------------------------------------------- /screenshots/flutter_layout_4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flutter_layout_4.png -------------------------------------------------------------------------------- /screenshots/flutter_layout_5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flutter_layout_5.png -------------------------------------------------------------------------------- /screenshots/flutter_layout_6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/flutter_layout_6.png -------------------------------------------------------------------------------- /screenshots/sample_layout_full.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/sample_layout_full.png -------------------------------------------------------------------------------- /android/gradle.properties: -------------------------------------------------------------------------------- 1 | org.gradle.jvmargs=-Xmx1536M 2 | android.useAndroidX=true 3 | android.enableJetifier=true 4 | android.enableR8=true 5 | -------------------------------------------------------------------------------- /screenshots/android_alternative_layout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/screenshots/android_alternative_layout.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-hdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/android/app/src/main/res/mipmap-hdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-mdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/android/app/src/main/res/mipmap-mdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/android/app/src/main/res/mipmap-xhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-20x20@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-29x29@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-40x40@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-60x60@3x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-76x76@2x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/sbis04/responsive_design/HEAD/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-83.5x83.5@2x.png -------------------------------------------------------------------------------- /lib/layouts/res/my_colors.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class MyColors { 4 | static const Color darkGreen = Color(0xFF092f42); 5 | static const Color greenAccent = Color(0xFF4cf186); 6 | } 7 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/app/src/main/kotlin/com/souvikbiswas/responsive_design/MainActivity.kt: -------------------------------------------------------------------------------- 1 | package com.souvikbiswas.responsive_design 2 | 3 | import io.flutter.embedding.android.FlutterActivity 4 | 5 | class MainActivity: FlutterActivity() { 6 | } 7 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata: -------------------------------------------------------------------------------- 1 | 2 | 4 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /lib/flow/res/custom_colors.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class CustomColors { 4 | static const Color neon_green = Color(0xFF51ca98); 5 | static const Color blue_gray = Color(0xFF1a3045); 6 | static const Color blue_gray_dark = Color(0xFF142637); 7 | } 8 | -------------------------------------------------------------------------------- /android/gradle/wrapper/gradle-wrapper.properties: -------------------------------------------------------------------------------- 1 | #Fri Jun 23 08:50:38 CEST 2017 2 | distributionBase=GRADLE_USER_HOME 3 | distributionPath=wrapper/dists 4 | zipStoreBase=GRADLE_USER_HOME 5 | zipStorePath=wrapper/dists 6 | distributionUrl=https\://services.gradle.org/distributions/gradle-5.6.2-all.zip 7 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /android/.gitignore: -------------------------------------------------------------------------------- 1 | gradle-wrapper.jar 2 | /.gradle 3 | /captures/ 4 | /gradlew 5 | /gradlew.bat 6 | /local.properties 7 | GeneratedPluginRegistrant.java 8 | 9 | # Remember to never publicly share your keystore. 10 | # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app 11 | key.properties 12 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | PreviewsEnabled 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | IDEDidComputeMac32BitWarning 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /lib/flow/fragments/contact_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/contact_view/contact_list.dart'; 3 | 4 | class ContactView extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return Container( 8 | color: Colors.white, 9 | child: ContactList(), 10 | ); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /lib/flow/fragments/bookmark_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/bookmark_view/bookmark_list.dart'; 3 | 4 | class BookmarkView extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return Container( 8 | color: Colors.white, 9 | child: BookmarkList(), 10 | ); 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /android/app/src/debug/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /android/app/src/profile/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md: -------------------------------------------------------------------------------- 1 | # Launch Screen Assets 2 | 3 | You can customize the launch screen with your own desired assets by replacing the image files in this directory. 4 | 5 | You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images. -------------------------------------------------------------------------------- /lib/flow/model/destination.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | class Destination { 4 | const Destination(this.id, this.title, this.icon); 5 | final int id; 6 | final String title; 7 | final IconData icon; 8 | } 9 | 10 | const List allDestinations = [ 11 | Destination(0, 'Chats', Icons.chat), 12 | Destination(1, 'Bookmark', Icons.bookmark), 13 | Destination(2, 'Contacts', Icons.people) 14 | ]; 15 | -------------------------------------------------------------------------------- /ios/Runner/AppDelegate.swift: -------------------------------------------------------------------------------- 1 | import UIKit 2 | import Flutter 3 | 4 | @UIApplicationMain 5 | @objc class AppDelegate: FlutterAppDelegate { 6 | override func application( 7 | _ application: UIApplication, 8 | didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? 9 | ) -> Bool { 10 | GeneratedPluginRegistrant.register(with: self) 11 | return super.application(application, didFinishLaunchingWithOptions: launchOptions) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /lib/flow/fragments/people_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/people_view/people_list.dart'; 3 | 4 | class PeopleView extends StatelessWidget { 5 | final bool isNotInChatMode; 6 | 7 | PeopleView({this.isNotInChatMode}); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | return Container( 12 | color: Colors.white, 13 | child: PeopleList(isNotInChatMode: isNotInChatMode), 14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /lib/flow/widgets/contact_view/contact_list.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/contact_view/contact_item.dart'; 3 | 4 | class ContactList extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return ListView.builder( 8 | physics: BouncingScrollPhysics(), 9 | itemCount: 20, 10 | itemBuilder: (context, index) { 11 | return ContactItem(); 12 | }, 13 | ); 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /android/settings.gradle: -------------------------------------------------------------------------------- 1 | include ':app' 2 | 3 | def localPropertiesFile = new File(rootProject.projectDir, "local.properties") 4 | def properties = new Properties() 5 | 6 | assert localPropertiesFile.exists() 7 | localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) } 8 | 9 | def flutterSdkPath = properties.getProperty("flutter.sdk") 10 | assert flutterSdkPath != null, "flutter.sdk not set in local.properties" 11 | apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle" 12 | -------------------------------------------------------------------------------- /android/app/src/main/res/drawable/launch_background.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 12 | 13 | -------------------------------------------------------------------------------- /lib/flow/widgets/bookmark_view/bookmark_list.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/bookmark_view/bookmark_item.dart'; 3 | 4 | class BookmarkList extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return ListView.builder( 8 | shrinkWrap: true, 9 | physics: BouncingScrollPhysics(), 10 | itemCount: 10, 11 | itemBuilder: (context, index) { 12 | return BookmarkItem(); 13 | }, 14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "idiom" : "universal", 5 | "filename" : "LaunchImage.png", 6 | "scale" : "1x" 7 | }, 8 | { 9 | "idiom" : "universal", 10 | "filename" : "LaunchImage@2x.png", 11 | "scale" : "2x" 12 | }, 13 | { 14 | "idiom" : "universal", 15 | "filename" : "LaunchImage@3x.png", 16 | "scale" : "3x" 17 | } 18 | ], 19 | "info" : { 20 | "version" : 1, 21 | "author" : "xcode" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /lib/main.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/home_page.dart'; 3 | 4 | void main() { 5 | runApp(MyResponsiveApp()); 6 | } 7 | 8 | class MyResponsiveApp extends StatelessWidget { 9 | @override 10 | Widget build(BuildContext context) { 11 | return MaterialApp( 12 | title: 'Responsive Design', 13 | theme: ThemeData( 14 | visualDensity: VisualDensity.adaptivePlatformDensity, 15 | ), 16 | debugShowCheckedModeBanner: false, 17 | home: HomePage(), 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lib/flow/widgets/chat_view/chat_list.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/chat_view/chat_item.dart'; 3 | 4 | class ChatList extends StatelessWidget { 5 | final Color profileIconColor; 6 | ChatList(this.profileIconColor); 7 | 8 | @override 9 | Widget build(BuildContext context) { 10 | return ListView.builder( 11 | shrinkWrap: true, 12 | reverse: true, 13 | physics: BouncingScrollPhysics(), 14 | itemCount: 30, 15 | itemBuilder: (context, index) { 16 | return ChatItem(profileIconColor); 17 | }, 18 | ); 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /lib/flow/widgets/people_view/people_list.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/widgets/people_view/people_item.dart'; 3 | 4 | class PeopleList extends StatelessWidget { 5 | final bool isNotInChatMode; 6 | 7 | PeopleList({this.isNotInChatMode}); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | return ListView.builder( 12 | shrinkWrap: true, 13 | physics: BouncingScrollPhysics(), 14 | itemCount: 30, 15 | itemBuilder: (context, index) { 16 | return PeopleItem( 17 | isNotInChatMode: isNotInChatMode, 18 | ); 19 | }, 20 | ); 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /ios/.gitignore: -------------------------------------------------------------------------------- 1 | *.mode1v3 2 | *.mode2v3 3 | *.moved-aside 4 | *.pbxuser 5 | *.perspectivev3 6 | **/*sync/ 7 | .sconsign.dblite 8 | .tags* 9 | **/.vagrant/ 10 | **/DerivedData/ 11 | Icon? 12 | **/Pods/ 13 | **/.symlinks/ 14 | profile 15 | xcuserdata 16 | **/.generated/ 17 | Flutter/App.framework 18 | Flutter/Flutter.framework 19 | Flutter/Flutter.podspec 20 | Flutter/Generated.xcconfig 21 | Flutter/app.flx 22 | Flutter/app.zip 23 | Flutter/flutter_assets/ 24 | Flutter/flutter_export_environment.sh 25 | ServiceDefinitions.json 26 | Runner/GeneratedPluginRegistrant.* 27 | 28 | # Exceptions to above rules. 29 | !default.mode1v3 30 | !default.mode2v3 31 | !default.pbxuser 32 | !default.perspectivev3 33 | -------------------------------------------------------------------------------- /web/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsive_design", 3 | "short_name": "responsive_design", 4 | "start_url": ".", 5 | "display": "standalone", 6 | "background_color": "#0175C2", 7 | "theme_color": "#0175C2", 8 | "description": "A new Flutter project.", 9 | "orientation": "portrait-primary", 10 | "prefer_related_applications": false, 11 | "icons": [ 12 | { 13 | "src": "icons/Icon-192.png", 14 | "sizes": "192x192", 15 | "type": "image/png" 16 | }, 17 | { 18 | "src": "icons/Icon-512.png", 19 | "sizes": "512x512", 20 | "type": "image/png" 21 | } 22 | ] 23 | } 24 | -------------------------------------------------------------------------------- /android/build.gradle: -------------------------------------------------------------------------------- 1 | buildscript { 2 | ext.kotlin_version = '1.3.50' 3 | repositories { 4 | google() 5 | jcenter() 6 | } 7 | 8 | dependencies { 9 | classpath 'com.android.tools.build:gradle:3.5.0' 10 | classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" 11 | } 12 | } 13 | 14 | allprojects { 15 | repositories { 16 | google() 17 | jcenter() 18 | } 19 | } 20 | 21 | rootProject.buildDir = '../build' 22 | subprojects { 23 | project.buildDir = "${rootProject.buildDir}/${project.name}" 24 | } 25 | subprojects { 26 | project.evaluationDependsOn(':app') 27 | } 28 | 29 | task clean(type: Delete) { 30 | delete rootProject.buildDir 31 | } 32 | -------------------------------------------------------------------------------- /pubspec.yaml: -------------------------------------------------------------------------------- 1 | name: responsive_design 2 | description: Various responsive layouts and Flow - A sample Flutter project showing responsive design. 3 | 4 | publish_to: "none" 5 | 6 | version: 1.0.0+1 7 | 8 | environment: 9 | sdk: ">=2.7.0 <3.0.0" 10 | 11 | dependencies: 12 | flutter: 13 | sdk: flutter 14 | 15 | cupertino_icons: ^1.0.0 16 | random_color: ^1.0.5 17 | fraction: ^1.2.1 18 | 19 | dev_dependencies: 20 | flutter_test: 21 | sdk: flutter 22 | 23 | flutter: 24 | uses-material-design: true 25 | 26 | fonts: 27 | - family: SansitaSwashed 28 | fonts: 29 | - asset: fonts/SansitaSwashed-Regular.ttf 30 | 31 | - family: GoogleSans 32 | fonts: 33 | - asset: fonts/GoogleSans-Regular.ttf 34 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Miscellaneous 2 | *.class 3 | *.log 4 | *.pyc 5 | *.swp 6 | .DS_Store 7 | .atom/ 8 | .buildlog/ 9 | .history 10 | .svn/ 11 | 12 | # IntelliJ related 13 | *.iml 14 | *.ipr 15 | *.iws 16 | .idea/ 17 | 18 | # The .vscode folder contains launch configuration and tasks you configure in 19 | # VS Code which you may wish to be included in version control, so this line 20 | # is commented out by default. 21 | #.vscode/ 22 | 23 | # Flutter/Dart/Pub related 24 | **/doc/api/ 25 | **/ios/Flutter/.last_build_id 26 | .dart_tool/ 27 | .flutter-plugins 28 | .flutter-plugins-dependencies 29 | .packages 30 | .pub-cache/ 31 | .pub/ 32 | /build/ 33 | 34 | # Web related 35 | lib/generated_plugin_registrant.dart 36 | 37 | # Symbolication related 38 | app.*.symbols 39 | 40 | # Obfuscation related 41 | app.*.map.json 42 | .metadata 43 | -------------------------------------------------------------------------------- /lib/layouts/media_query_layout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/layouts/res/my_colors.dart'; 3 | 4 | class MediaQueryLayout extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | Size screenSize = MediaQuery.of(context).size; 8 | Orientation orientation = MediaQuery.of(context).orientation; 9 | 10 | return Scaffold( 11 | body: Container( 12 | color: MyColors.darkGreen, 13 | child: Center( 14 | child: Text( 15 | 'View\n\n' + 16 | '[MediaQuery width]: ${screenSize.width.toStringAsFixed(2)}\n\n' + 17 | '[MediaQuery orientation]: $orientation', 18 | style: TextStyle(color: Colors.white, fontSize: 18), 19 | ), 20 | ), 21 | ), 22 | ); 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /lib/flow/fragments/destination_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/fragments/bookmark_view.dart'; 3 | import 'package:responsive_design/flow/fragments/contact_view.dart'; 4 | import 'package:responsive_design/flow/fragments/people_view.dart'; 5 | import 'package:responsive_design/flow/model/destination.dart'; 6 | 7 | class DestinationView extends StatelessWidget { 8 | final Destination destination; 9 | 10 | DestinationView(this.destination); 11 | 12 | @override 13 | Widget build(BuildContext context) { 14 | return Scaffold( 15 | backgroundColor: Colors.white, 16 | body: Container( 17 | alignment: Alignment.center, 18 | child: destination.id == 0 19 | ? PeopleView() 20 | : destination.id == 1 21 | ? BookmarkView() 22 | : ContactView(), 23 | ), 24 | ); 25 | } 26 | } 27 | -------------------------------------------------------------------------------- /ios/Flutter/AppFrameworkInfo.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | App 9 | CFBundleIdentifier 10 | io.flutter.flutter.app 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | App 15 | CFBundlePackageType 16 | FMWK 17 | CFBundleShortVersionString 18 | 1.0 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | 1.0 23 | MinimumOSVersion 24 | 9.0 25 | 26 | 27 | -------------------------------------------------------------------------------- /lib/flow/screens/chat_page.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/fragments/chat_view_large.dart'; 3 | import 'package:responsive_design/flow/fragments/chat_view_small.dart'; 4 | 5 | class ChatPage extends StatelessWidget { 6 | final Color profileIconColor; 7 | ChatPage(this.profileIconColor); 8 | 9 | @override 10 | Widget build(BuildContext context) { 11 | return Scaffold( 12 | body: OrientationBuilder( 13 | builder: (context, orientation) => LayoutBuilder( 14 | builder: (context, constraints) { 15 | double breakpointWidth = orientation == Orientation.portrait ? 600 : 800; 16 | 17 | if (constraints.maxWidth < breakpointWidth) { 18 | return ChatViewSmall(profileIconColor); 19 | } else { 20 | return ChatViewLarge(profileIconColor); 21 | } 22 | }, 23 | ), 24 | ), 25 | ); 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /android/app/src/main/res/values/styles.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 9 | 15 | 18 | 19 | -------------------------------------------------------------------------------- /lib/flow/screens/flow_home_page.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/fragments/home_view_large.dart'; 3 | import 'package:responsive_design/flow/fragments/home_view_small.dart'; 4 | 5 | class FlowHomePage extends StatefulWidget { 6 | @override 7 | _FlowHomePageState createState() => _FlowHomePageState(); 8 | } 9 | 10 | class _FlowHomePageState extends State { 11 | int _currentIndex = 0; 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | return Scaffold( 16 | body: LayoutBuilder( 17 | builder: (context, constraints) { 18 | if (constraints.maxWidth < 600) { 19 | return HomeViewSmall(_currentIndex, (index) { 20 | setState(() { 21 | _currentIndex = index; 22 | }); 23 | }); 24 | } else { 25 | return HomeViewLarge(_currentIndex, (index) { 26 | setState(() { 27 | _currentIndex = index; 28 | }); 29 | }); 30 | } 31 | }, 32 | ), 33 | ); 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Souvik Biswas 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. -------------------------------------------------------------------------------- /lib/flow/fragments/chat_view_small.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/res/custom_colors.dart'; 3 | import 'package:responsive_design/flow/widgets/chat_view/chat_list.dart'; 4 | import 'package:responsive_design/flow/widgets/send_widget.dart'; 5 | 6 | class ChatViewSmall extends StatelessWidget { 7 | final Color profileIconColor; 8 | ChatViewSmall(this.profileIconColor); 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | return Scaffold( 13 | appBar: AppBar( 14 | backgroundColor: CustomColors.blue_gray, 15 | title: Text( 16 | 'Chats', 17 | style: TextStyle( 18 | fontFamily: 'SansitaSwashed', 19 | fontSize: 28, 20 | letterSpacing: 1, 21 | ), 22 | ), 23 | actions: [ 24 | IconButton( 25 | icon: Icon(Icons.search), 26 | onPressed: () {}, 27 | ) 28 | ], 29 | ), 30 | body: Container( 31 | color: Colors.white, 32 | child: Column( 33 | children: [ 34 | Expanded(child: ChatList(profileIconColor)), 35 | SendWidget(), 36 | ], 37 | ), 38 | ), 39 | ); 40 | } 41 | } 42 | -------------------------------------------------------------------------------- /web/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | responsive_design 18 | 19 | 20 | 21 | 24 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /lib/layouts/aspect_ratio_layout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:fraction/fraction.dart'; 3 | import 'package:responsive_design/layouts/res/my_colors.dart'; 4 | 5 | class AspectRatioLayout extends StatelessWidget { 6 | @override 7 | Widget build(BuildContext context) { 8 | return Scaffold( 9 | backgroundColor: Colors.white, 10 | body: SafeArea( 11 | child: Column( 12 | children: [ 13 | AspectRatioWidget(ratio: '16 / 9'), 14 | AspectRatioWidget(ratio: '3 / 2'), 15 | ], 16 | ), 17 | ), 18 | ); 19 | } 20 | } 21 | 22 | class AspectRatioWidget extends StatelessWidget { 23 | final String ratio; 24 | 25 | AspectRatioWidget({@required this.ratio}); 26 | 27 | @override 28 | Widget build(BuildContext context) { 29 | return AspectRatio( 30 | aspectRatio: Fraction.fromString(ratio).toDouble(), 31 | child: Container( 32 | decoration: BoxDecoration( 33 | color: MyColors.darkGreen, 34 | border: Border.all(color: Colors.white), 35 | ), 36 | child: Padding( 37 | padding: const EdgeInsets.all(16.0), 38 | child: Center( 39 | child: Text( 40 | 'AspectRatio - $ratio', 41 | style: TextStyle(color: Colors.white, fontSize: 24), 42 | ), 43 | ), 44 | ), 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/flow/widgets/text_view.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | 3 | /// Generates a placeholder for a Text of small size 4 | class TextViewSmall extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return FractionallySizedBox( 8 | alignment: Alignment.centerLeft, 9 | widthFactor: 0.4, 10 | child: TextView(), 11 | ); 12 | } 13 | } 14 | 15 | /// Generates a placeholder for a Text of medium size 16 | class TextViewMedium extends StatelessWidget { 17 | @override 18 | Widget build(BuildContext context) { 19 | return FractionallySizedBox( 20 | alignment: Alignment.centerLeft, 21 | widthFactor: 0.8, 22 | child: TextView(), 23 | ); 24 | } 25 | } 26 | 27 | /// Generates a placeholder for a Text of large size 28 | class TextViewLarge extends StatelessWidget { 29 | @override 30 | Widget build(BuildContext context) { 31 | return FractionallySizedBox( 32 | alignment: Alignment.centerLeft, 33 | widthFactor: 1.0, 34 | child: TextView(), 35 | ); 36 | } 37 | } 38 | 39 | /// Generates a placeholder for a Text 40 | class TextView extends StatelessWidget { 41 | @override 42 | Widget build(BuildContext context) { 43 | return Container( 44 | height: 16, 45 | decoration: BoxDecoration( 46 | color: Colors.grey[300], 47 | borderRadius: BorderRadius.all( 48 | Radius.circular(5), 49 | ), 50 | ), 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /lib/flow/widgets/contact_view/contact_item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:random_color/random_color.dart'; 3 | import 'package:responsive_design/flow/res/custom_colors.dart'; 4 | import 'package:responsive_design/flow/widgets/text_view.dart'; 5 | 6 | /// The content to the displayed in each ChatList item 7 | class ContactItem extends StatelessWidget { 8 | final RandomColor _randomColor = RandomColor(); 9 | 10 | @override 11 | Widget build(BuildContext context) { 12 | Color profileColor = _randomColor.randomColor(); 13 | 14 | return Container( 15 | color: Colors.white, 16 | child: Padding( 17 | padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 16.0, right: 16.0), 18 | child: Row( 19 | mainAxisAlignment: MainAxisAlignment.start, 20 | mainAxisSize: MainAxisSize.max, 21 | children: [ 22 | CircleAvatar( 23 | radius: 30, 24 | backgroundColor: profileColor, 25 | ), 26 | Expanded( 27 | child: Padding( 28 | padding: const EdgeInsets.only(left: 16.0), 29 | child: TextViewMedium(), 30 | )), 31 | RaisedButton( 32 | color: CustomColors.neon_green, 33 | onPressed: () {}, 34 | child: Text( 35 | 'invite', 36 | style: TextStyle(color: Colors.white, fontSize: 18), 37 | ), 38 | ) 39 | ], 40 | ), 41 | ), 42 | ); 43 | } 44 | } 45 | -------------------------------------------------------------------------------- /lib/flow/widgets/send_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/res/custom_colors.dart'; 3 | 4 | class SendWidget extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return Container( 8 | color: CustomColors.blue_gray, 9 | child: Padding( 10 | padding: const EdgeInsets.all(8.0), 11 | child: Row( 12 | mainAxisAlignment: MainAxisAlignment.center, 13 | mainAxisSize: MainAxisSize.max, 14 | children: [ 15 | IconButton( 16 | icon: Icon( 17 | Icons.emoji_emotions, 18 | color: CustomColors.neon_green, 19 | ), 20 | onPressed: null, 21 | ), 22 | Expanded( 23 | child: TextField( 24 | decoration: InputDecoration( 25 | border: OutlineInputBorder( 26 | borderRadius: BorderRadius.all(Radius.circular(30.0)), 27 | ), 28 | contentPadding: EdgeInsets.fromLTRB(16.0, 0.0, 10.0, 0.0), 29 | filled: true, 30 | hintStyle: TextStyle(color: CustomColors.blue_gray), 31 | hintText: "Enter your message", 32 | fillColor: Colors.white70, 33 | ), 34 | ), 35 | ), 36 | IconButton( 37 | icon: Icon( 38 | Icons.send, 39 | color: CustomColors.neon_green, 40 | ), 41 | onPressed: null, 42 | ), 43 | ], 44 | ), 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /ios/Runner/Base.lproj/Main.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /ios/Runner/Info.plist: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | CFBundleDevelopmentRegion 6 | $(DEVELOPMENT_LANGUAGE) 7 | CFBundleExecutable 8 | $(EXECUTABLE_NAME) 9 | CFBundleIdentifier 10 | $(PRODUCT_BUNDLE_IDENTIFIER) 11 | CFBundleInfoDictionaryVersion 12 | 6.0 13 | CFBundleName 14 | responsive_design 15 | CFBundlePackageType 16 | APPL 17 | CFBundleShortVersionString 18 | $(FLUTTER_BUILD_NAME) 19 | CFBundleSignature 20 | ???? 21 | CFBundleVersion 22 | $(FLUTTER_BUILD_NUMBER) 23 | LSRequiresIPhoneOS 24 | 25 | UILaunchStoryboardName 26 | LaunchScreen 27 | UIMainStoryboardFile 28 | Main 29 | UISupportedInterfaceOrientations 30 | 31 | UIInterfaceOrientationPortrait 32 | UIInterfaceOrientationLandscapeLeft 33 | UIInterfaceOrientationLandscapeRight 34 | 35 | UISupportedInterfaceOrientations~ipad 36 | 37 | UIInterfaceOrientationPortrait 38 | UIInterfaceOrientationPortraitUpsideDown 39 | UIInterfaceOrientationLandscapeLeft 40 | UIInterfaceOrientationLandscapeRight 41 | 42 | UIViewControllerBasedStatusBarAppearance 43 | 44 | 45 | 46 | -------------------------------------------------------------------------------- /lib/layouts/orientation_builder_layout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/layouts/res/my_colors.dart'; 3 | 4 | class OrientationBuilderLayout extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | Orientation deviceOrientation = MediaQuery.of(context).orientation; 8 | 9 | return Scaffold( 10 | body: Column( 11 | children: [ 12 | Expanded( 13 | flex: 2, 14 | child: Container( 15 | color: MyColors.darkGreen, 16 | child: OrientationBuilder( 17 | builder: (context, orientation) => Center( 18 | child: Text( 19 | 'View 1\n\n' + 20 | '[MediaQuery orientation]:\n$deviceOrientation\n\n' + 21 | '[OrientationBuilder]:\n$orientation', 22 | style: TextStyle(color: Colors.white, fontSize: 18), 23 | ), 24 | ), 25 | ), 26 | ), 27 | ), 28 | Expanded( 29 | flex: 3, 30 | child: OrientationBuilder( 31 | builder: (context, orientation) => Container( 32 | color: Colors.white, 33 | child: Center( 34 | child: Text( 35 | 'View 2\n\n' + 36 | '[MediaQuery orientation]:\n$deviceOrientation\n\n' + 37 | '[OrientationBuilder]:\n$orientation', 38 | style: TextStyle(color: MyColors.darkGreen, fontSize: 18), 39 | ), 40 | ), 41 | ), 42 | ), 43 | ), 44 | ], 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/layouts/layout_builder_layout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/layouts/res/my_colors.dart'; 3 | 4 | class LayoutBuilderLayout extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | Size screenSize = MediaQuery.of(context).size; 8 | 9 | return Scaffold( 10 | body: Row( 11 | children: [ 12 | Expanded( 13 | flex: 2, 14 | child: LayoutBuilder( 15 | builder: (context, constraints) => Container( 16 | color: MyColors.darkGreen, 17 | child: Center( 18 | child: Text( 19 | 'View 1\n\n' + 20 | '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' + 21 | '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}', 22 | style: TextStyle(color: Colors.white, fontSize: 18), 23 | ), 24 | ), 25 | ), 26 | ), 27 | ), 28 | Expanded( 29 | flex: 3, 30 | child: LayoutBuilder( 31 | builder: (context, constraints) => Container( 32 | color: Colors.white, 33 | child: Center( 34 | child: Text( 35 | 'View 2\n\n' + 36 | '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' + 37 | '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}', 38 | style: TextStyle(color: MyColors.darkGreen, fontSize: 18), 39 | ), 40 | ), 41 | ), 42 | ), 43 | ), 44 | ], 45 | ), 46 | ); 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /lib/flow/fragments/home_view_large.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/fragments/destination_view.dart'; 3 | import 'package:responsive_design/flow/model/destination.dart'; 4 | import 'package:responsive_design/flow/widgets/menu_widget.dart'; 5 | 6 | class HomeViewLarge extends StatefulWidget { 7 | final int currentIndex; 8 | final Function(int selectedIndex) onTapped; 9 | 10 | HomeViewLarge(this.currentIndex, this.onTapped); 11 | 12 | @override 13 | _HomeViewLargeState createState() => _HomeViewLargeState(); 14 | } 15 | 16 | class _HomeViewLargeState extends State { 17 | int _index = 0; 18 | 19 | @override 20 | void initState() { 21 | super.initState(); 22 | _index = widget.currentIndex; 23 | } 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Container( 28 | child: Row( 29 | crossAxisAlignment: CrossAxisAlignment.start, 30 | mainAxisAlignment: MainAxisAlignment.start, 31 | children: [ 32 | Expanded( 33 | flex: 2, 34 | child: MenuWidget( 35 | selectedIndex: _index, 36 | onTapped: (selectedIndex) { 37 | setState(() { 38 | _index = selectedIndex; 39 | widget.onTapped(_index); 40 | }); 41 | }, 42 | ), 43 | ), 44 | Expanded( 45 | flex: 3, 46 | child: IndexedStack( 47 | index: _index, 48 | children: allDestinations.map((Destination destination) { 49 | return DestinationView(destination); 50 | }).toList(), 51 | ), 52 | ), 53 | ], 54 | ), 55 | ); 56 | } 57 | } 58 | -------------------------------------------------------------------------------- /lib/flow/widgets/people_view/people_item.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:random_color/random_color.dart'; 3 | import 'package:responsive_design/flow/screens/chat_page.dart'; 4 | import 'package:responsive_design/flow/widgets/text_view.dart'; 5 | 6 | /// The content to the displayed in each PeopleList item 7 | class PeopleItem extends StatelessWidget { 8 | final RandomColor _randomColor = RandomColor(); 9 | final bool isNotInChatMode; 10 | 11 | PeopleItem({this.isNotInChatMode = true}); 12 | 13 | @override 14 | Widget build(BuildContext context) { 15 | Color profileColor = _randomColor.randomColor(); 16 | 17 | return Container( 18 | color: Colors.white, 19 | child: Padding( 20 | padding: const EdgeInsets.only(top: 8.0, bottom: 8.0, left: 16.0, right: 40.0), 21 | child: InkWell( 22 | onTap: () { 23 | isNotInChatMode ?? 24 | Navigator.of(context).push(MaterialPageRoute( 25 | builder: (context) => ChatPage(profileColor), 26 | )); 27 | }, 28 | child: Row( 29 | mainAxisAlignment: MainAxisAlignment.start, 30 | mainAxisSize: MainAxisSize.max, 31 | children: [ 32 | CircleAvatar( 33 | radius: 30, 34 | backgroundColor: profileColor, 35 | ), 36 | SizedBox(width: 16.0), 37 | Expanded( 38 | child: Column( 39 | crossAxisAlignment: CrossAxisAlignment.start, 40 | children: [ 41 | TextViewSmall(), 42 | SizedBox(height: 8.0), 43 | TextViewMedium(), 44 | ], 45 | ), 46 | ) 47 | ], 48 | ), 49 | ), 50 | ), 51 | ); 52 | } 53 | } 54 | -------------------------------------------------------------------------------- /lib/flow/fragments/chat_view_large.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/fragments/people_view.dart'; 3 | import 'package:responsive_design/flow/res/custom_colors.dart'; 4 | import 'package:responsive_design/flow/widgets/chat_view/chat_list.dart'; 5 | import 'package:responsive_design/flow/widgets/send_widget.dart'; 6 | 7 | class ChatViewLarge extends StatelessWidget { 8 | final Color profileIconColor; 9 | ChatViewLarge(this.profileIconColor); 10 | 11 | @override 12 | Widget build(BuildContext context) { 13 | return Container( 14 | child: Row( 15 | children: [ 16 | Expanded( 17 | flex: 2, 18 | child: SingleChildScrollView( 19 | child: Column( 20 | children: [ 21 | Container( 22 | width: double.maxFinite, 23 | height: 100, 24 | color: CustomColors.blue_gray_dark, 25 | child: SafeArea( 26 | child: Align( 27 | alignment: Alignment.centerLeft, 28 | child: Padding( 29 | padding: const EdgeInsets.all(16.0), 30 | child: BackButton(color: Colors.white), 31 | ), 32 | ), 33 | ), 34 | ), 35 | PeopleView(isNotInChatMode: false), 36 | ], 37 | ), 38 | ), 39 | ), 40 | Expanded( 41 | flex: 3, 42 | child: Container( 43 | color: Colors.white, 44 | child: Column( 45 | children: [ 46 | Expanded(child: ChatList(profileIconColor)), 47 | SendWidget(), 48 | ], 49 | ), 50 | ), 51 | ), 52 | ], 53 | ), 54 | ); 55 | } 56 | } 57 | -------------------------------------------------------------------------------- /android/app/build.gradle: -------------------------------------------------------------------------------- 1 | def localProperties = new Properties() 2 | def localPropertiesFile = rootProject.file('local.properties') 3 | if (localPropertiesFile.exists()) { 4 | localPropertiesFile.withReader('UTF-8') { reader -> 5 | localProperties.load(reader) 6 | } 7 | } 8 | 9 | def flutterRoot = localProperties.getProperty('flutter.sdk') 10 | if (flutterRoot == null) { 11 | throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") 12 | } 13 | 14 | def flutterVersionCode = localProperties.getProperty('flutter.versionCode') 15 | if (flutterVersionCode == null) { 16 | flutterVersionCode = '1' 17 | } 18 | 19 | def flutterVersionName = localProperties.getProperty('flutter.versionName') 20 | if (flutterVersionName == null) { 21 | flutterVersionName = '1.0' 22 | } 23 | 24 | apply plugin: 'com.android.application' 25 | apply plugin: 'kotlin-android' 26 | apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" 27 | 28 | android { 29 | compileSdkVersion 29 30 | 31 | sourceSets { 32 | main.java.srcDirs += 'src/main/kotlin' 33 | } 34 | 35 | lintOptions { 36 | disable 'InvalidPackage' 37 | } 38 | 39 | defaultConfig { 40 | // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). 41 | applicationId "com.souvikbiswas.responsive_design" 42 | minSdkVersion 16 43 | targetSdkVersion 29 44 | versionCode flutterVersionCode.toInteger() 45 | versionName flutterVersionName 46 | } 47 | 48 | buildTypes { 49 | release { 50 | // TODO: Add your own signing config for the release build. 51 | // Signing with the debug keys for now, so `flutter run --release` works. 52 | signingConfig signingConfigs.debug 53 | } 54 | } 55 | } 56 | 57 | flutter { 58 | source '../..' 59 | } 60 | 61 | dependencies { 62 | implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" 63 | } 64 | -------------------------------------------------------------------------------- /lib/layouts/fractionally_sized_box_layout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/layouts/res/my_colors.dart'; 3 | 4 | class FractionallySizedBoxLayout extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return Scaffold( 8 | backgroundColor: Colors.white, 9 | body: SafeArea( 10 | child: Column( 11 | mainAxisAlignment: MainAxisAlignment.start, 12 | children: [ 13 | Row( 14 | crossAxisAlignment: CrossAxisAlignment.start, 15 | children: [ 16 | FractionallySizedWidget(widthFactor: 0.4), 17 | ], 18 | ), 19 | Row( 20 | crossAxisAlignment: CrossAxisAlignment.start, 21 | children: [ 22 | FractionallySizedWidget(widthFactor: 0.6), 23 | ], 24 | ), 25 | Row( 26 | crossAxisAlignment: CrossAxisAlignment.start, 27 | children: [ 28 | FractionallySizedWidget(widthFactor: 0.8), 29 | ], 30 | ), 31 | Row( 32 | crossAxisAlignment: CrossAxisAlignment.start, 33 | children: [ 34 | FractionallySizedWidget(widthFactor: 1.0), 35 | ], 36 | ), 37 | ], 38 | ), 39 | ), 40 | ); 41 | } 42 | } 43 | 44 | class FractionallySizedWidget extends StatelessWidget { 45 | final double widthFactor; 46 | FractionallySizedWidget({@required this.widthFactor}); 47 | 48 | @override 49 | Widget build(BuildContext context) { 50 | return Expanded( 51 | child: FractionallySizedBox( 52 | alignment: Alignment.centerLeft, 53 | widthFactor: widthFactor, 54 | child: Container( 55 | decoration: BoxDecoration( 56 | color: MyColors.darkGreen, 57 | border: Border.all(color: Colors.white), 58 | ), 59 | child: Padding( 60 | padding: const EdgeInsets.all(16.0), 61 | child: Text( 62 | '${widthFactor * 100}%', 63 | style: TextStyle(color: Colors.white, fontSize: 24), 64 | ), 65 | ), 66 | ), 67 | ), 68 | ); 69 | } 70 | } 71 | -------------------------------------------------------------------------------- /lib/layouts/expanded_flexible_layout.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/layouts/res/my_colors.dart'; 3 | 4 | class ExpandedFlexibleLayout extends StatelessWidget { 5 | @override 6 | Widget build(BuildContext context) { 7 | return Scaffold( 8 | backgroundColor: Colors.white, 9 | body: SafeArea( 10 | child: Column( 11 | children: [ 12 | Row( 13 | children: [ 14 | ExpandedWidget(), 15 | FlexibleWidget(), 16 | ], 17 | ), 18 | Row( 19 | children: [ 20 | ExpandedWidget(), 21 | ExpandedWidget(), 22 | ], 23 | ), 24 | Row( 25 | children: [ 26 | FlexibleWidget(), 27 | FlexibleWidget(), 28 | ], 29 | ), 30 | Row( 31 | children: [ 32 | FlexibleWidget(), 33 | ExpandedWidget(), 34 | ], 35 | ), 36 | ], 37 | ), 38 | ), 39 | ); 40 | } 41 | } 42 | 43 | class ExpandedWidget extends StatelessWidget { 44 | @override 45 | Widget build(BuildContext context) { 46 | return Expanded( 47 | child: Container( 48 | decoration: BoxDecoration( 49 | color: MyColors.darkGreen, 50 | border: Border.all(color: Colors.white), 51 | ), 52 | child: Padding( 53 | padding: const EdgeInsets.all(16.0), 54 | child: Text( 55 | 'Expanded', 56 | style: TextStyle(color: Colors.white, fontSize: 24), 57 | ), 58 | ), 59 | ), 60 | ); 61 | } 62 | } 63 | 64 | class FlexibleWidget extends StatelessWidget { 65 | @override 66 | Widget build(BuildContext context) { 67 | return Flexible( 68 | child: Container( 69 | decoration: BoxDecoration( 70 | color: MyColors.greenAccent, 71 | border: Border.all(color: Colors.white), 72 | ), 73 | child: Padding( 74 | padding: const EdgeInsets.all(16.0), 75 | child: Text( 76 | 'Flexible', 77 | style: TextStyle(color: MyColors.darkGreen, fontSize: 24), 78 | ), 79 | ), 80 | ), 81 | ); 82 | } 83 | } 84 | -------------------------------------------------------------------------------- /ios/Runner/Base.lproj/LaunchScreen.storyboard: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | -------------------------------------------------------------------------------- /lib/flow/widgets/bookmark_view/bookmark_item.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | 3 | import 'package:flutter/material.dart'; 4 | import 'package:random_color/random_color.dart'; 5 | import 'package:responsive_design/flow/widgets/text_view.dart'; 6 | 7 | /// The content to the displayed in each PeopleList item 8 | class BookmarkItem extends StatelessWidget { 9 | final RandomColor _randomColor = RandomColor(); 10 | final _randomHeight = new Random(); 11 | 12 | static const int minHeight = 60; 13 | static const int maxHeight = 250; 14 | static const double bubbleRoundedRadius = 20; 15 | 16 | int getBubbleHeight() => minHeight + _randomHeight.nextInt(maxHeight - minHeight); 17 | 18 | @override 19 | Widget build(BuildContext context) { 20 | Color profileColor = _randomColor.randomColor(); 21 | 22 | return Container( 23 | color: Colors.white, 24 | child: Padding( 25 | padding: const EdgeInsets.only(top: 16.0, bottom: 8.0, left: 16.0, right: 8.0), 26 | child: Row( 27 | mainAxisAlignment: MainAxisAlignment.start, 28 | mainAxisSize: MainAxisSize.max, 29 | crossAxisAlignment: CrossAxisAlignment.start, 30 | children: [ 31 | CircleAvatar( 32 | radius: 30, 33 | backgroundColor: profileColor, 34 | ), 35 | SizedBox(width: 16.0), 36 | Expanded( 37 | child: Column( 38 | mainAxisAlignment: MainAxisAlignment.start, 39 | mainAxisSize: MainAxisSize.min, 40 | crossAxisAlignment: CrossAxisAlignment.start, 41 | children: [ 42 | TextViewMedium(), 43 | SizedBox(height: 16.0), 44 | Container( 45 | height: getBubbleHeight().toDouble(), 46 | decoration: BoxDecoration( 47 | color: profileColor.withOpacity(0.3), 48 | borderRadius: BorderRadius.only( 49 | bottomLeft: Radius.circular(bubbleRoundedRadius), 50 | bottomRight: Radius.circular(bubbleRoundedRadius), 51 | topRight: Radius.circular(bubbleRoundedRadius), 52 | ), 53 | ), 54 | ) 55 | ], 56 | ), 57 | ), 58 | Padding( 59 | padding: const EdgeInsets.only(left: 24.0, right: 8.0), 60 | child: Icon(Icons.bookmark), 61 | ), 62 | ], 63 | ), 64 | ), 65 | ); 66 | } 67 | } 68 | -------------------------------------------------------------------------------- /android/app/src/main/AndroidManifest.xml: -------------------------------------------------------------------------------- 1 | 3 | 8 | 12 | 19 | 23 | 27 | 32 | 36 | 37 | 38 | 39 | 40 | 41 | 43 | 46 | 47 | 48 | -------------------------------------------------------------------------------- /lib/home_page.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/screens/flow_home_page.dart'; 3 | import 'package:responsive_design/layouts/aspect_ratio_layout.dart'; 4 | import 'package:responsive_design/layouts/expanded_flexible_layout.dart'; 5 | import 'package:responsive_design/layouts/fractionally_sized_box_layout.dart'; 6 | import 'package:responsive_design/layouts/layout_builder_layout.dart'; 7 | import 'package:responsive_design/layouts/media_query_layout.dart'; 8 | import 'package:responsive_design/layouts/orientation_builder_layout.dart'; 9 | import 'package:responsive_design/layouts/res/my_colors.dart'; 10 | 11 | class HomePage extends StatelessWidget { 12 | @override 13 | Widget build(BuildContext context) { 14 | return Scaffold( 15 | body: SafeArea( 16 | child: Padding( 17 | padding: const EdgeInsets.all(16.0), 18 | child: Column( 19 | mainAxisAlignment: MainAxisAlignment.spaceEvenly, 20 | children: [ 21 | LabelWidget('Flow', FlowHomePage()), 22 | LabelWidget('MediaQeuryLayout', MediaQueryLayout()), 23 | LabelWidget('LayoutBuilderLayout', LayoutBuilderLayout()), 24 | LabelWidget('OrientationBuilderLayout', OrientationBuilderLayout()), 25 | LabelWidget('ExpandedFlexibleLayout', ExpandedFlexibleLayout()), 26 | LabelWidget('FractionallySizedBoxLayout', FractionallySizedBoxLayout()), 27 | LabelWidget('AspectRatioLayout', AspectRatioLayout()), 28 | ], 29 | ), 30 | ), 31 | ), 32 | ); 33 | } 34 | } 35 | 36 | class LabelWidget extends StatelessWidget { 37 | final String label; 38 | final Widget widget; 39 | 40 | LabelWidget(this.label, this.widget); 41 | 42 | @override 43 | Widget build(BuildContext context) { 44 | return Row( 45 | children: [ 46 | Expanded( 47 | child: RaisedButton( 48 | color: MyColors.darkGreen, 49 | shape: RoundedRectangleBorder( 50 | borderRadius: BorderRadius.circular(20.0), 51 | ), 52 | onPressed: () { 53 | Navigator.of(context).push( 54 | MaterialPageRoute( 55 | builder: (context) => widget, 56 | ), 57 | ); 58 | }, 59 | child: Padding( 60 | padding: const EdgeInsets.all(10.0), 61 | child: Text( 62 | label, 63 | style: TextStyle( 64 | color: MyColors.greenAccent, 65 | fontSize: 20, 66 | fontFamily: 'GoogleSans', 67 | ), 68 | ), 69 | ), 70 | ), 71 | ), 72 | ], 73 | ); 74 | } 75 | } 76 | -------------------------------------------------------------------------------- /ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json: -------------------------------------------------------------------------------- 1 | { 2 | "images" : [ 3 | { 4 | "size" : "20x20", 5 | "idiom" : "iphone", 6 | "filename" : "Icon-App-20x20@2x.png", 7 | "scale" : "2x" 8 | }, 9 | { 10 | "size" : "20x20", 11 | "idiom" : "iphone", 12 | "filename" : "Icon-App-20x20@3x.png", 13 | "scale" : "3x" 14 | }, 15 | { 16 | "size" : "29x29", 17 | "idiom" : "iphone", 18 | "filename" : "Icon-App-29x29@1x.png", 19 | "scale" : "1x" 20 | }, 21 | { 22 | "size" : "29x29", 23 | "idiom" : "iphone", 24 | "filename" : "Icon-App-29x29@2x.png", 25 | "scale" : "2x" 26 | }, 27 | { 28 | "size" : "29x29", 29 | "idiom" : "iphone", 30 | "filename" : "Icon-App-29x29@3x.png", 31 | "scale" : "3x" 32 | }, 33 | { 34 | "size" : "40x40", 35 | "idiom" : "iphone", 36 | "filename" : "Icon-App-40x40@2x.png", 37 | "scale" : "2x" 38 | }, 39 | { 40 | "size" : "40x40", 41 | "idiom" : "iphone", 42 | "filename" : "Icon-App-40x40@3x.png", 43 | "scale" : "3x" 44 | }, 45 | { 46 | "size" : "60x60", 47 | "idiom" : "iphone", 48 | "filename" : "Icon-App-60x60@2x.png", 49 | "scale" : "2x" 50 | }, 51 | { 52 | "size" : "60x60", 53 | "idiom" : "iphone", 54 | "filename" : "Icon-App-60x60@3x.png", 55 | "scale" : "3x" 56 | }, 57 | { 58 | "size" : "20x20", 59 | "idiom" : "ipad", 60 | "filename" : "Icon-App-20x20@1x.png", 61 | "scale" : "1x" 62 | }, 63 | { 64 | "size" : "20x20", 65 | "idiom" : "ipad", 66 | "filename" : "Icon-App-20x20@2x.png", 67 | "scale" : "2x" 68 | }, 69 | { 70 | "size" : "29x29", 71 | "idiom" : "ipad", 72 | "filename" : "Icon-App-29x29@1x.png", 73 | "scale" : "1x" 74 | }, 75 | { 76 | "size" : "29x29", 77 | "idiom" : "ipad", 78 | "filename" : "Icon-App-29x29@2x.png", 79 | "scale" : "2x" 80 | }, 81 | { 82 | "size" : "40x40", 83 | "idiom" : "ipad", 84 | "filename" : "Icon-App-40x40@1x.png", 85 | "scale" : "1x" 86 | }, 87 | { 88 | "size" : "40x40", 89 | "idiom" : "ipad", 90 | "filename" : "Icon-App-40x40@2x.png", 91 | "scale" : "2x" 92 | }, 93 | { 94 | "size" : "76x76", 95 | "idiom" : "ipad", 96 | "filename" : "Icon-App-76x76@1x.png", 97 | "scale" : "1x" 98 | }, 99 | { 100 | "size" : "76x76", 101 | "idiom" : "ipad", 102 | "filename" : "Icon-App-76x76@2x.png", 103 | "scale" : "2x" 104 | }, 105 | { 106 | "size" : "83.5x83.5", 107 | "idiom" : "ipad", 108 | "filename" : "Icon-App-83.5x83.5@2x.png", 109 | "scale" : "2x" 110 | }, 111 | { 112 | "size" : "1024x1024", 113 | "idiom" : "ios-marketing", 114 | "filename" : "Icon-App-1024x1024@1x.png", 115 | "scale" : "1x" 116 | } 117 | ], 118 | "info" : { 119 | "version" : 1, 120 | "author" : "xcode" 121 | } 122 | } 123 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme: -------------------------------------------------------------------------------- 1 | 2 | 5 | 8 | 9 | 15 | 21 | 22 | 23 | 24 | 25 | 30 | 31 | 32 | 33 | 39 | 40 | 41 | 42 | 43 | 44 | 54 | 56 | 62 | 63 | 64 | 65 | 66 | 67 | 73 | 75 | 81 | 82 | 83 | 84 | 86 | 87 | 90 | 91 | 92 | -------------------------------------------------------------------------------- /pubspec.lock: -------------------------------------------------------------------------------- 1 | # Generated by pub 2 | # See https://dart.dev/tools/pub/glossary#lockfile 3 | packages: 4 | async: 5 | dependency: transitive 6 | description: 7 | name: async 8 | url: "https://pub.dartlang.org" 9 | source: hosted 10 | version: "2.5.0-nullsafety.1" 11 | boolean_selector: 12 | dependency: transitive 13 | description: 14 | name: boolean_selector 15 | url: "https://pub.dartlang.org" 16 | source: hosted 17 | version: "2.1.0-nullsafety.1" 18 | characters: 19 | dependency: transitive 20 | description: 21 | name: characters 22 | url: "https://pub.dartlang.org" 23 | source: hosted 24 | version: "1.1.0-nullsafety.3" 25 | charcode: 26 | dependency: transitive 27 | description: 28 | name: charcode 29 | url: "https://pub.dartlang.org" 30 | source: hosted 31 | version: "1.2.0-nullsafety.1" 32 | clock: 33 | dependency: transitive 34 | description: 35 | name: clock 36 | url: "https://pub.dartlang.org" 37 | source: hosted 38 | version: "1.1.0-nullsafety.1" 39 | collection: 40 | dependency: transitive 41 | description: 42 | name: collection 43 | url: "https://pub.dartlang.org" 44 | source: hosted 45 | version: "1.15.0-nullsafety.3" 46 | cupertino_icons: 47 | dependency: "direct main" 48 | description: 49 | name: cupertino_icons 50 | url: "https://pub.dartlang.org" 51 | source: hosted 52 | version: "1.0.0" 53 | fake_async: 54 | dependency: transitive 55 | description: 56 | name: fake_async 57 | url: "https://pub.dartlang.org" 58 | source: hosted 59 | version: "1.2.0-nullsafety.1" 60 | flutter: 61 | dependency: "direct main" 62 | description: flutter 63 | source: sdk 64 | version: "0.0.0" 65 | flutter_test: 66 | dependency: "direct dev" 67 | description: flutter 68 | source: sdk 69 | version: "0.0.0" 70 | fraction: 71 | dependency: "direct main" 72 | description: 73 | name: fraction 74 | url: "https://pub.dartlang.org" 75 | source: hosted 76 | version: "1.2.1" 77 | matcher: 78 | dependency: transitive 79 | description: 80 | name: matcher 81 | url: "https://pub.dartlang.org" 82 | source: hosted 83 | version: "0.12.10-nullsafety.1" 84 | meta: 85 | dependency: transitive 86 | description: 87 | name: meta 88 | url: "https://pub.dartlang.org" 89 | source: hosted 90 | version: "1.3.0-nullsafety.3" 91 | path: 92 | dependency: transitive 93 | description: 94 | name: path 95 | url: "https://pub.dartlang.org" 96 | source: hosted 97 | version: "1.8.0-nullsafety.1" 98 | random_color: 99 | dependency: "direct main" 100 | description: 101 | name: random_color 102 | url: "https://pub.dartlang.org" 103 | source: hosted 104 | version: "1.0.5" 105 | sky_engine: 106 | dependency: transitive 107 | description: flutter 108 | source: sdk 109 | version: "0.0.99" 110 | source_span: 111 | dependency: transitive 112 | description: 113 | name: source_span 114 | url: "https://pub.dartlang.org" 115 | source: hosted 116 | version: "1.8.0-nullsafety.2" 117 | stack_trace: 118 | dependency: transitive 119 | description: 120 | name: stack_trace 121 | url: "https://pub.dartlang.org" 122 | source: hosted 123 | version: "1.10.0-nullsafety.1" 124 | stream_channel: 125 | dependency: transitive 126 | description: 127 | name: stream_channel 128 | url: "https://pub.dartlang.org" 129 | source: hosted 130 | version: "2.1.0-nullsafety.1" 131 | string_scanner: 132 | dependency: transitive 133 | description: 134 | name: string_scanner 135 | url: "https://pub.dartlang.org" 136 | source: hosted 137 | version: "1.1.0-nullsafety.1" 138 | term_glyph: 139 | dependency: transitive 140 | description: 141 | name: term_glyph 142 | url: "https://pub.dartlang.org" 143 | source: hosted 144 | version: "1.2.0-nullsafety.1" 145 | test_api: 146 | dependency: transitive 147 | description: 148 | name: test_api 149 | url: "https://pub.dartlang.org" 150 | source: hosted 151 | version: "0.2.19-nullsafety.2" 152 | typed_data: 153 | dependency: transitive 154 | description: 155 | name: typed_data 156 | url: "https://pub.dartlang.org" 157 | source: hosted 158 | version: "1.3.0-nullsafety.3" 159 | vector_math: 160 | dependency: transitive 161 | description: 162 | name: vector_math 163 | url: "https://pub.dartlang.org" 164 | source: hosted 165 | version: "2.1.0-nullsafety.3" 166 | sdks: 167 | dart: ">=2.10.0-110 <2.11.0" 168 | -------------------------------------------------------------------------------- /lib/flow/widgets/chat_view/chat_item.dart: -------------------------------------------------------------------------------- 1 | import 'dart:math'; 2 | 3 | import 'package:flutter/material.dart'; 4 | import 'package:responsive_design/flow/res/custom_colors.dart'; 5 | 6 | /// The content to the displayed in each ChatList item 7 | class ChatItem extends StatelessWidget { 8 | final Color profileIconColor; 9 | ChatItem(this.profileIconColor); 10 | 11 | static const int minHeight = 50; 12 | static const int maxHeight = 100; 13 | static const double bubbleRoundedRadius = 20; 14 | 15 | static const int minCount = 1; 16 | static const int maxCount = 4; 17 | 18 | final _randomHeight = new Random(); 19 | final _randomCount = new Random(); 20 | final _randomSide = new Random(); 21 | 22 | int getBubbleHeight() => minHeight + _randomHeight.nextInt(maxHeight - minHeight); 23 | int getListItemCount() => minCount + _randomCount.nextInt(maxCount - minCount); 24 | int decideSide() => 0 + _randomSide.nextInt(2); 25 | 26 | @override 27 | Widget build(BuildContext context) { 28 | int side = decideSide(); 29 | 30 | return Container( 31 | color: Colors.white, 32 | child: side == 0 33 | ? Padding( 34 | padding: EdgeInsets.only( 35 | top: 8.0, 36 | bottom: 8.0, 37 | left: 8.0, 38 | right: 16.0, 39 | ), 40 | child: Row( 41 | mainAxisAlignment: MainAxisAlignment.start, 42 | mainAxisSize: MainAxisSize.min, 43 | crossAxisAlignment: CrossAxisAlignment.start, 44 | children: [ 45 | CircleAvatar( 46 | radius: 20, 47 | backgroundColor: profileIconColor, 48 | ), 49 | SizedBox(width: 8.0), 50 | Expanded( 51 | child: ListView.separated( 52 | shrinkWrap: true, 53 | physics: NeverScrollableScrollPhysics(), 54 | separatorBuilder: (context, index) => SizedBox(height: 5.0), 55 | itemCount: getListItemCount(), 56 | itemBuilder: (context, index) { 57 | return Container( 58 | height: getBubbleHeight().toDouble(), 59 | decoration: BoxDecoration( 60 | color: CustomColors.blue_gray.withOpacity(0.3), 61 | borderRadius: BorderRadius.only( 62 | bottomLeft: Radius.circular(bubbleRoundedRadius), 63 | bottomRight: Radius.circular(bubbleRoundedRadius), 64 | topRight: Radius.circular(bubbleRoundedRadius), 65 | ), 66 | ), 67 | ); 68 | }, 69 | ), 70 | ) 71 | ], 72 | ), 73 | ) 74 | : Padding( 75 | padding: EdgeInsets.only( 76 | top: 8.0, 77 | bottom: 8.0, 78 | left: 16.0, 79 | right: 8.0, 80 | ), 81 | child: Row( 82 | mainAxisAlignment: MainAxisAlignment.end, 83 | mainAxisSize: MainAxisSize.max, 84 | crossAxisAlignment: CrossAxisAlignment.start, 85 | children: [ 86 | Expanded( 87 | child: ListView.separated( 88 | shrinkWrap: true, 89 | physics: NeverScrollableScrollPhysics(), 90 | separatorBuilder: (context, index) => SizedBox(height: 5.0), 91 | itemCount: getListItemCount(), 92 | itemBuilder: (context, index) { 93 | return Container( 94 | height: getBubbleHeight().toDouble(), 95 | decoration: BoxDecoration( 96 | color: CustomColors.neon_green.withOpacity(0.3), 97 | borderRadius: BorderRadius.only( 98 | bottomLeft: Radius.circular(bubbleRoundedRadius), 99 | bottomRight: Radius.circular(bubbleRoundedRadius), 100 | topLeft: Radius.circular(bubbleRoundedRadius), 101 | ), 102 | ), 103 | ); 104 | }, 105 | ), 106 | ), 107 | SizedBox(width: 8.0), 108 | CircleAvatar( 109 | radius: 20, 110 | backgroundColor: CustomColors.neon_green, 111 | ), 112 | ], 113 | ), 114 | ), 115 | ); 116 | } 117 | } 118 | -------------------------------------------------------------------------------- /lib/flow/widgets/menu_widget.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/res/custom_colors.dart'; 3 | import 'package:responsive_design/flow/widgets/text_view.dart'; 4 | 5 | class MenuWidget extends StatefulWidget { 6 | final int selectedIndex; 7 | final Function(int selectedIndex) onTapped; 8 | 9 | MenuWidget({@required this.onTapped, this.selectedIndex}); 10 | 11 | @override 12 | _MenuWidgetState createState() => _MenuWidgetState(); 13 | } 14 | 15 | class _MenuWidgetState extends State { 16 | int _selectedItem = 0; 17 | 18 | @override 19 | void initState() { 20 | super.initState(); 21 | _selectedItem = widget.selectedIndex; 22 | } 23 | 24 | @override 25 | Widget build(BuildContext context) { 26 | return SingleChildScrollView( 27 | child: Column( 28 | crossAxisAlignment: CrossAxisAlignment.start, 29 | mainAxisAlignment: MainAxisAlignment.start, 30 | mainAxisSize: MainAxisSize.max, 31 | children: [ 32 | Container( 33 | width: double.maxFinite, 34 | height: 150, 35 | color: CustomColors.blue_gray_dark, 36 | child: Center( 37 | child: Text( 38 | 'Flow', 39 | style: TextStyle( 40 | color: Colors.white, 41 | fontFamily: 'SansitaSwashed', 42 | fontSize: 32, 43 | letterSpacing: 1, 44 | ), 45 | ), 46 | ), 47 | ), 48 | Container( 49 | height: 5, 50 | width: double.maxFinite, 51 | color: Colors.white60, 52 | ), 53 | InkWell( 54 | onTap: () { 55 | setState(() { 56 | _selectedItem = 0; 57 | widget.onTapped(_selectedItem); 58 | }); 59 | }, 60 | child: Item(0, 'Chats', _selectedItem, Icons.chat)), 61 | Container( 62 | height: 5, 63 | width: double.maxFinite, 64 | color: Colors.white60, 65 | ), 66 | InkWell( 67 | onTap: () { 68 | setState(() { 69 | _selectedItem = 1; 70 | widget.onTapped(_selectedItem); 71 | }); 72 | }, 73 | child: Item(1, 'Bookmark', _selectedItem, Icons.bookmark)), 74 | Container( 75 | height: 5, 76 | width: double.maxFinite, 77 | color: Colors.white60, 78 | ), 79 | InkWell( 80 | onTap: () { 81 | setState(() { 82 | _selectedItem = 2; 83 | widget.onTapped(_selectedItem); 84 | }); 85 | }, 86 | child: Item(2, 'Contacts', _selectedItem, Icons.people)), 87 | Container( 88 | height: 5, 89 | width: double.maxFinite, 90 | color: Colors.white60, 91 | ), 92 | Padding( 93 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 94 | child: Row( 95 | children: [ 96 | Icon(Icons.notifications, size: 24, color: CustomColors.neon_green), 97 | SizedBox(width: 16.0), 98 | Expanded(child: TextViewMedium()), 99 | ], 100 | ), 101 | ), 102 | Container( 103 | height: 2, 104 | width: double.maxFinite, 105 | color: Colors.white24, 106 | ), 107 | Padding( 108 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 109 | child: Row( 110 | children: [ 111 | Icon(Icons.settings, size: 24, color: CustomColors.neon_green), 112 | SizedBox(width: 16.0), 113 | Expanded(child: TextViewMedium()), 114 | ], 115 | ), 116 | ), 117 | Container( 118 | height: 2, 119 | width: double.maxFinite, 120 | color: Colors.white24, 121 | ), 122 | Padding( 123 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 124 | child: Row( 125 | children: [ 126 | Icon(Icons.info, size: 24, color: CustomColors.neon_green), 127 | SizedBox(width: 16.0), 128 | Expanded(child: TextViewMedium()), 129 | ], 130 | ), 131 | ), 132 | Container( 133 | height: 2, 134 | width: double.maxFinite, 135 | color: Colors.white24, 136 | ), 137 | ], 138 | ), 139 | ); 140 | } 141 | } 142 | 143 | class Item extends StatefulWidget { 144 | final int id; 145 | final String title; 146 | final int selected; 147 | final IconData icon; 148 | 149 | Item(this.id, this.title, this.selected, this.icon); 150 | 151 | @override 152 | _ItemState createState() => _ItemState(); 153 | } 154 | 155 | class _ItemState extends State { 156 | @override 157 | Widget build(BuildContext context) { 158 | return Container( 159 | decoration: BoxDecoration( 160 | border: widget.selected == widget.id 161 | ? Border.all(width: 2.0, color: CustomColors.blue_gray) 162 | : null, 163 | borderRadius: BorderRadius.all(Radius.circular(5.0)), 164 | ), 165 | child: Padding( 166 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 167 | child: Row( 168 | children: [ 169 | Icon(widget.icon, size: 24, color: CustomColors.neon_green), 170 | SizedBox(width: 16.0), 171 | Text(widget.title, style: TextStyle(color: CustomColors.neon_green)), 172 | ], 173 | ), 174 | ), 175 | ); 176 | } 177 | } 178 | -------------------------------------------------------------------------------- /lib/flow/fragments/home_view_small.dart: -------------------------------------------------------------------------------- 1 | import 'package:flutter/material.dart'; 2 | import 'package:responsive_design/flow/fragments/destination_view.dart'; 3 | import 'package:responsive_design/flow/model/destination.dart'; 4 | import 'package:responsive_design/flow/res/custom_colors.dart'; 5 | import 'package:responsive_design/flow/widgets/text_view.dart'; 6 | 7 | class HomeViewSmall extends StatefulWidget { 8 | final int currentIndex; 9 | final Function(int selectedIndex) onTapped; 10 | HomeViewSmall(this.currentIndex, this.onTapped); 11 | 12 | @override 13 | _HomeViewSmallState createState() => _HomeViewSmallState(); 14 | } 15 | 16 | class _HomeViewSmallState extends State { 17 | int _currentIndex = 0; 18 | 19 | @override 20 | void initState() { 21 | super.initState(); 22 | _currentIndex = widget.currentIndex; 23 | } 24 | 25 | @override 26 | Widget build(BuildContext context) { 27 | return Scaffold( 28 | appBar: AppBar( 29 | backgroundColor: CustomColors.blue_gray, 30 | title: Text( 31 | 'Flow', 32 | style: TextStyle( 33 | fontFamily: 'SansitaSwashed', 34 | fontSize: 28, 35 | letterSpacing: 1, 36 | ), 37 | ), 38 | actions: [ 39 | IconButton( 40 | icon: Icon(Icons.search), 41 | onPressed: () {}, 42 | ), 43 | Padding( 44 | padding: const EdgeInsets.only(right: 8.0), 45 | child: IconButton( 46 | icon: CircleAvatar( 47 | radius: 16, 48 | backgroundColor: CustomColors.neon_green, 49 | ), 50 | onPressed: () {}, 51 | ), 52 | ) 53 | ], 54 | ), 55 | drawer: Drawer( 56 | child: Container( 57 | color: CustomColors.blue_gray, 58 | child: Column( 59 | crossAxisAlignment: CrossAxisAlignment.start, 60 | mainAxisAlignment: MainAxisAlignment.start, 61 | children: [ 62 | Container( 63 | width: double.maxFinite, 64 | height: 150, 65 | color: CustomColors.blue_gray_dark, 66 | child: Center( 67 | child: Text( 68 | 'Flow', 69 | style: TextStyle( 70 | color: Colors.white, 71 | fontFamily: 'SansitaSwashed', 72 | fontSize: 32, 73 | letterSpacing: 1, 74 | ), 75 | ), 76 | ), 77 | ), 78 | Container( 79 | height: 5, 80 | width: double.maxFinite, 81 | color: Colors.white60, 82 | ), 83 | Padding( 84 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 85 | child: Row( 86 | children: [ 87 | Icon(Icons.notifications, size: 24, color: CustomColors.neon_green), 88 | SizedBox(width: 16.0), 89 | Expanded( 90 | child: Padding( 91 | padding: EdgeInsets.only(right: 16.0), 92 | child: TextViewMedium(), 93 | ), 94 | ), 95 | ], 96 | ), 97 | ), 98 | Container( 99 | height: 2, 100 | width: double.maxFinite, 101 | color: Colors.white24, 102 | ), 103 | Padding( 104 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 105 | child: Row( 106 | children: [ 107 | Icon(Icons.settings, size: 24, color: CustomColors.neon_green), 108 | SizedBox(width: 16.0), 109 | Expanded( 110 | child: Padding( 111 | padding: EdgeInsets.only(right: 16.0), 112 | child: TextViewMedium(), 113 | ), 114 | ), 115 | ], 116 | ), 117 | ), 118 | Container( 119 | height: 2, 120 | width: double.maxFinite, 121 | color: Colors.white24, 122 | ), 123 | Padding( 124 | padding: const EdgeInsets.only(left: 16.0, top: 20.0, bottom: 20.0), 125 | child: Row( 126 | children: [ 127 | Icon(Icons.info, size: 24, color: CustomColors.neon_green), 128 | SizedBox(width: 16.0), 129 | Expanded( 130 | child: Padding( 131 | padding: EdgeInsets.only(right: 16.0), 132 | child: TextViewMedium(), 133 | ), 134 | ), 135 | ], 136 | ), 137 | ), 138 | Container( 139 | height: 2, 140 | width: double.maxFinite, 141 | color: Colors.white24, 142 | ), 143 | Expanded( 144 | child: Align( 145 | alignment: Alignment.bottomCenter, 146 | child: Padding( 147 | padding: const EdgeInsets.all(8.0), 148 | child: Text( 149 | 'Copyright © 2020 | Flow', 150 | style: TextStyle( 151 | color: Colors.white60, 152 | fontSize: 14, 153 | ), 154 | ), 155 | ), 156 | ), 157 | ) 158 | ], 159 | ), 160 | ), 161 | ), 162 | bottomNavigationBar: BottomNavigationBar( 163 | backgroundColor: CustomColors.blue_gray, 164 | selectedIconTheme: IconThemeData(size: 30), 165 | unselectedIconTheme: IconThemeData(size: 20), 166 | selectedItemColor: CustomColors.neon_green, 167 | unselectedItemColor: Colors.white60, 168 | showUnselectedLabels: false, 169 | currentIndex: _currentIndex, 170 | onTap: (int index) { 171 | setState(() { 172 | _currentIndex = index; 173 | widget.onTapped(_currentIndex); 174 | }); 175 | }, 176 | items: allDestinations.map((Destination destination) { 177 | return BottomNavigationBarItem( 178 | icon: Icon(destination.icon), 179 | label: destination.title, 180 | ); 181 | }).toList(), 182 | ), 183 | body: IndexedStack( 184 | index: _currentIndex, 185 | children: allDestinations.map((Destination destination) { 186 | return DestinationView(destination); 187 | }).toList(), 188 | ), 189 | // PeopleView(), 190 | ); 191 | } 192 | } 193 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Responsive Layout in Flutter 2 | 3 | **Flutter** being a cross-platform app development framework supports devices with hugely varying screen sizes, it can run on a device as small as a smartwatch to devices like a large TV. It's always a challenge to adapt your app to that variety of screen sizes and pixel densities using the same codebase. 4 | 5 | This repository contains demonstration of some important concepts that you can use while building a **responsive layout** in Flutter. 6 | 7 | Also, a fully responsive sample Flutter app design called **Flow**, having split view is included in this repository. 8 | 9 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flow_cover.png) 10 | 11 | ## Widgets 12 | 13 | Some important widgets you should know about while building a responsive layout in Flutter are as follows: 14 | 15 | ### 1. MediaQuery 16 | 17 | You can use [MediaQuery](https://api.flutter.dev/flutter/widgets/MediaQuery-class.html) for retrieving the **size** (width/height) and **orientation** (portrait/landscape) of the screen. 18 | 19 | An example of this is as follows: 20 | 21 | ```dart 22 | class HomePage extends StatelessWidget { 23 | @override 24 | Widget build(BuildContext context) { 25 | Size screenSize = MediaQuery.of(context).size; 26 | Orientation orientation = MediaQuery.of(context).orientation; 27 | 28 | return Scaffold( 29 | body: Container( 30 | color: CustomColors.android, 31 | child: Center( 32 | child: Text( 33 | 'View\n\n' + 34 | '[MediaQuery width]: ${screenSize.width.toStringAsFixed(2)}\n\n' + 35 | '[MediaQuery orientation]: $orientation', 36 | style: TextStyle(color: Colors.white, fontSize: 18), 37 | ), 38 | ), 39 | ), 40 | ); 41 | } 42 | } 43 | ``` 44 | 45 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flutter_layout_1.png) 46 | 47 | ### 2. LayoutBuilder 48 | 49 | Using the [LayoutBuilder](https://api.flutter.dev/flutter/widgets/LayoutBuilder-class.html) class you can get the [BoxConstraints](https://api.flutter.dev/flutter/rendering/BoxConstraints-class.html) object, which can be used for determining the **maxWidth** and **maxHeight** of the widget. 50 | 51 | > **REMEMBER:** The main difference between `MediaQuery` & `LayoutBuilder` is that **MediaQuery** uses the complete context of the screen rather than just the size of your particular widget. Whereas, **LayoutBuilder** can determine the maximum width and height of a particular widget. 52 | 53 | An example demonstrating this is as follows: 54 | 55 | ```dart 56 | class HomePage extends StatelessWidget { 57 | @override 58 | Widget build(BuildContext context) { 59 | Size screenSize = MediaQuery.of(context).size; 60 | 61 | return Scaffold( 62 | body: Row( 63 | children: [ 64 | Expanded( 65 | flex: 2, 66 | child: LayoutBuilder( 67 | builder: (context, constraints) => Container( 68 | color: CustomColors.android, 69 | child: Center( 70 | child: Text( 71 | 'View 1\n\n' + 72 | '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' + 73 | '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}', 74 | style: TextStyle(color: Colors.white, fontSize: 18), 75 | ), 76 | ), 77 | ), 78 | ), 79 | ), 80 | Expanded( 81 | flex: 3, 82 | child: LayoutBuilder( 83 | builder: (context, constraints) => Container( 84 | color: Colors.white, 85 | child: Center( 86 | child: Text( 87 | 'View 2\n\n' + 88 | '[MediaQuery]:\n ${screenSize.width.toStringAsFixed(2)}\n\n' + 89 | '[LayoutBuilder]:\n${constraints.maxWidth.toStringAsFixed(2)}', 90 | style: TextStyle(color: CustomColors.android, fontSize: 18), 91 | ), 92 | ), 93 | ), 94 | ), 95 | ), 96 | ], 97 | ), 98 | ); 99 | } 100 | } 101 | ``` 102 | 103 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flutter_layout_2.png) 104 | 105 | ### 3. OrientationBuilder 106 | 107 | To determine a widget's current orientation you can use the [OrientationBuilder](https://api.flutter.dev/flutter/widgets/OrientationBuilder-class.html) class. 108 | 109 | > **REMEMBER:** This is different from the device orientation which you can retrieve using `MediaQuery`. 110 | 111 | An example demonstrating this is as follows: 112 | 113 | ```dart 114 | class HomePage extends StatelessWidget { 115 | @override 116 | Widget build(BuildContext context) { 117 | Orientation deviceOrientation = MediaQuery.of(context).orientation; 118 | 119 | return Scaffold( 120 | body: Column( 121 | children: [ 122 | Expanded( 123 | flex: 2, 124 | child: Container( 125 | color: CustomColors.android, 126 | child: OrientationBuilder( 127 | builder: (context, orientation) => Center( 128 | child: Text( 129 | 'View 1\n\n' + 130 | '[MediaQuery orientation]:\n$deviceOrientation\n\n' + 131 | '[OrientationBuilder]:\n$orientation', 132 | style: TextStyle(color: Colors.white, fontSize: 18), 133 | ), 134 | ), 135 | ), 136 | ), 137 | ), 138 | Expanded( 139 | flex: 3, 140 | child: OrientationBuilder( 141 | builder: (context, orientation) => Container( 142 | color: Colors.white, 143 | child: Center( 144 | child: Text( 145 | 'View 2\n\n' + 146 | '[MediaQuery orientation]:\n$deviceOrientation\n\n' + 147 | '[OrientationBuilder]:\n$orientation', 148 | style: TextStyle(color: CustomColors.android, fontSize: 18), 149 | ), 150 | ), 151 | ), 152 | ), 153 | ), 154 | ], 155 | ), 156 | ); 157 | } 158 | } 159 | ``` 160 | 161 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flutter_layout_3.png) 162 | 163 | ### 4. Expanded and Flexible 164 | 165 | The widgets that are especially useful inside a `Column` or a `Row` are `Expanded` and `Flexible`. [Expanded](https://api.flutter.dev/flutter/widgets/Expanded-class.html) widget expands a child of a Row, Column, or Flex so that the child fills the available space, whereas [Flexible](https://api.flutter.dev/flutter/widgets/Flexible-class.html) does not necessarily have to fill the entire available space. 166 | 167 | An example showing various combinations of `Expanded` and `Flexible` is as follows: 168 | 169 | ```dart 170 | class HomePage extends StatelessWidget { 171 | @override 172 | Widget build(BuildContext context) { 173 | return Scaffold( 174 | backgroundColor: Colors.white, 175 | body: SafeArea( 176 | child: Column( 177 | children: [ 178 | Row( 179 | children: [ 180 | ExpandedWidget(), 181 | FlexibleWidget(), 182 | ], 183 | ), 184 | Row( 185 | children: [ 186 | ExpandedWidget(), 187 | ExpandedWidget(), 188 | ], 189 | ), 190 | Row( 191 | children: [ 192 | FlexibleWidget(), 193 | FlexibleWidget(), 194 | ], 195 | ), 196 | Row( 197 | children: [ 198 | FlexibleWidget(), 199 | ExpandedWidget(), 200 | ], 201 | ), 202 | ], 203 | ), 204 | ), 205 | ); 206 | } 207 | } 208 | 209 | class ExpandedWidget extends StatelessWidget { 210 | @override 211 | Widget build(BuildContext context) { 212 | return Expanded( 213 | child: Container( 214 | decoration: BoxDecoration( 215 | color: CustomColors.android, 216 | border: Border.all(color: Colors.white), 217 | ), 218 | child: Padding( 219 | padding: const EdgeInsets.all(16.0), 220 | child: Text( 221 | 'Expanded', 222 | style: TextStyle(color: Colors.white, fontSize: 24), 223 | ), 224 | ), 225 | ), 226 | ); 227 | } 228 | } 229 | 230 | class FlexibleWidget extends StatelessWidget { 231 | @override 232 | Widget build(BuildContext context) { 233 | return Flexible( 234 | child: Container( 235 | decoration: BoxDecoration( 236 | color: CustomColors.androidAccent, 237 | border: Border.all(color: Colors.white), 238 | ), 239 | child: Padding( 240 | padding: const EdgeInsets.all(16.0), 241 | child: Text( 242 | 'Flexible', 243 | style: TextStyle(color: CustomColors.android, fontSize: 24), 244 | ), 245 | ), 246 | ), 247 | ); 248 | } 249 | } 250 | ``` 251 | 252 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flutter_layout_4.png) 253 | 254 | ### 5. FractionallySizedBox 255 | 256 | [FractionallySizedBox](https://api.flutter.dev/flutter/widgets/FractionallySizedBox-class.html) widget helps to sizes its child to a fraction of the total available space. It is especially useful inside `Expanded` or `Flexible` widgets. 257 | 258 | An example is as follows: 259 | 260 | ```dart 261 | class HomePage extends StatelessWidget { 262 | @override 263 | Widget build(BuildContext context) { 264 | return Scaffold( 265 | backgroundColor: Colors.white, 266 | body: SafeArea( 267 | child: Column( 268 | mainAxisAlignment: MainAxisAlignment.start, 269 | children: [ 270 | Row( 271 | crossAxisAlignment: CrossAxisAlignment.start, 272 | children: [ 273 | FractionallySizedWidget(widthFactor: 0.4), 274 | ], 275 | ), 276 | Row( 277 | crossAxisAlignment: CrossAxisAlignment.start, 278 | children: [ 279 | FractionallySizedWidget(widthFactor: 0.6), 280 | ], 281 | ), 282 | Row( 283 | crossAxisAlignment: CrossAxisAlignment.start, 284 | children: [ 285 | FractionallySizedWidget(widthFactor: 0.8), 286 | ], 287 | ), 288 | Row( 289 | crossAxisAlignment: CrossAxisAlignment.start, 290 | children: [ 291 | FractionallySizedWidget(widthFactor: 1.0), 292 | ], 293 | ), 294 | ], 295 | ), 296 | ), 297 | ); 298 | } 299 | } 300 | 301 | class FractionallySizedWidget extends StatelessWidget { 302 | final double widthFactor; 303 | FractionallySizedWidget({@required this.widthFactor}); 304 | 305 | @override 306 | Widget build(BuildContext context) { 307 | return Expanded( 308 | child: FractionallySizedBox( 309 | alignment: Alignment.centerLeft, 310 | widthFactor: widthFactor, 311 | child: Container( 312 | decoration: BoxDecoration( 313 | color: CustomColors.android, 314 | border: Border.all(color: Colors.white), 315 | ), 316 | child: Padding( 317 | padding: const EdgeInsets.all(16.0), 318 | child: Text( 319 | '${widthFactor * 100}%', 320 | style: TextStyle(color: Colors.white, fontSize: 24), 321 | ), 322 | ), 323 | ), 324 | ), 325 | ); 326 | } 327 | } 328 | ``` 329 | 330 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flutter_layout_5.png) 331 | 332 | ### 6. AspectRatio 333 | 334 | You can use [AspectRatio](https://api.flutter.dev/flutter/widgets/AspectRatio-class.html) widget to size the child to a specific aspect ratio. First of all, it tries the largest width permitted by the layout constraints and decides the height by applying the given aspect ratio to the width. 335 | 336 | ```dart 337 | class HomePage extends StatelessWidget { 338 | @override 339 | Widget build(BuildContext context) { 340 | return Scaffold( 341 | backgroundColor: Colors.white, 342 | body: SafeArea( 343 | child: Column( 344 | children: [ 345 | AspectRatioWidget(ratio: '16 / 9'), 346 | AspectRatioWidget(ratio: '3 / 2'), 347 | ], 348 | ), 349 | ), 350 | ); 351 | } 352 | } 353 | 354 | class AspectRatioWidget extends StatelessWidget { 355 | final String ratio; 356 | 357 | AspectRatioWidget({@required this.ratio}); 358 | 359 | @override 360 | Widget build(BuildContext context) { 361 | return AspectRatio( 362 | aspectRatio: Fraction.fromString(ratio).toDouble(), 363 | child: Container( 364 | decoration: BoxDecoration( 365 | color: CustomColors.android, 366 | border: Border.all(color: Colors.white), 367 | ), 368 | child: Padding( 369 | padding: const EdgeInsets.all(16.0), 370 | child: Center( 371 | child: Text( 372 | 'AspectRatio - $ratio', 373 | style: TextStyle(color: Colors.white, fontSize: 24), 374 | ), 375 | ), 376 | ), 377 | ), 378 | ); 379 | } 380 | } 381 | ``` 382 | 383 | ![](https://github.com/sbis04/responsive_design/raw/master/screenshots/flutter_layout_6.png) 384 | 385 | ## Plugins 386 | 387 | Some of the amazing Flutter plugins that you can use while building a responsive layout are as follows: 388 | 389 | * [device_preview](https://pub.dev/packages/device_preview) 390 | * [breakpoint](https://pub.dev/packages/breakpoint) 391 | * [responsive_builder](https://pub.dev/packages/responsive_builder) 392 | * [responsive_framework](https://pub.dev/packages/responsive_framework) 393 | 394 | ## License 395 | 396 | Copyright (c) 2020 Souvik Biswas 397 | 398 | Permission is hereby granted, free of charge, to any person obtaining a copy 399 | of this software and associated documentation files (the "Software"), to deal 400 | in the Software without restriction, including without limitation the rights 401 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 402 | copies of the Software, and to permit persons to whom the Software is 403 | furnished to do so, subject to the following conditions: 404 | 405 | The above copyright notice and this permission notice shall be included in all 406 | copies or substantial portions of the Software. 407 | 408 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 409 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 410 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 411 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 412 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 413 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 414 | SOFTWARE. 415 | -------------------------------------------------------------------------------- /ios/Runner.xcodeproj/project.pbxproj: -------------------------------------------------------------------------------- 1 | // !$*UTF8*$! 2 | { 3 | archiveVersion = 1; 4 | classes = { 5 | }; 6 | objectVersion = 50; 7 | objects = { 8 | 9 | /* Begin PBXBuildFile section */ 10 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 11 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; 12 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; }; 13 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; }; 14 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; }; 15 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; }; 16 | /* End PBXBuildFile section */ 17 | 18 | /* Begin PBXCopyFilesBuildPhase section */ 19 | 9705A1C41CF9048500538489 /* Embed Frameworks */ = { 20 | isa = PBXCopyFilesBuildPhase; 21 | buildActionMask = 2147483647; 22 | dstPath = ""; 23 | dstSubfolderSpec = 10; 24 | files = ( 25 | ); 26 | name = "Embed Frameworks"; 27 | runOnlyForDeploymentPostprocessing = 0; 28 | }; 29 | /* End PBXCopyFilesBuildPhase section */ 30 | 31 | /* Begin PBXFileReference section */ 32 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 33 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 34 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; 35 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = ""; }; 36 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 37 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 38 | 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = ""; }; 39 | 9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = ""; }; 40 | 97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; }; 41 | 97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; 42 | 97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 43 | 97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; 44 | 97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; 45 | /* End PBXFileReference section */ 46 | 47 | /* Begin PBXFrameworksBuildPhase section */ 48 | 97C146EB1CF9000F007C117D /* Frameworks */ = { 49 | isa = PBXFrameworksBuildPhase; 50 | buildActionMask = 2147483647; 51 | files = ( 52 | ); 53 | runOnlyForDeploymentPostprocessing = 0; 54 | }; 55 | /* End PBXFrameworksBuildPhase section */ 56 | 57 | /* Begin PBXGroup section */ 58 | 9740EEB11CF90186004384FC /* Flutter */ = { 59 | isa = PBXGroup; 60 | children = ( 61 | 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, 62 | 9740EEB21CF90195004384FC /* Debug.xcconfig */, 63 | 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, 64 | 9740EEB31CF90195004384FC /* Generated.xcconfig */, 65 | ); 66 | name = Flutter; 67 | sourceTree = ""; 68 | }; 69 | 97C146E51CF9000F007C117D = { 70 | isa = PBXGroup; 71 | children = ( 72 | 9740EEB11CF90186004384FC /* Flutter */, 73 | 97C146F01CF9000F007C117D /* Runner */, 74 | 97C146EF1CF9000F007C117D /* Products */, 75 | ); 76 | sourceTree = ""; 77 | }; 78 | 97C146EF1CF9000F007C117D /* Products */ = { 79 | isa = PBXGroup; 80 | children = ( 81 | 97C146EE1CF9000F007C117D /* Runner.app */, 82 | ); 83 | name = Products; 84 | sourceTree = ""; 85 | }; 86 | 97C146F01CF9000F007C117D /* Runner */ = { 87 | isa = PBXGroup; 88 | children = ( 89 | 97C146FA1CF9000F007C117D /* Main.storyboard */, 90 | 97C146FD1CF9000F007C117D /* Assets.xcassets */, 91 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */, 92 | 97C147021CF9000F007C117D /* Info.plist */, 93 | 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */, 94 | 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */, 95 | 74858FAE1ED2DC5600515810 /* AppDelegate.swift */, 96 | 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */, 97 | ); 98 | path = Runner; 99 | sourceTree = ""; 100 | }; 101 | /* End PBXGroup section */ 102 | 103 | /* Begin PBXNativeTarget section */ 104 | 97C146ED1CF9000F007C117D /* Runner */ = { 105 | isa = PBXNativeTarget; 106 | buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */; 107 | buildPhases = ( 108 | 9740EEB61CF901F6004384FC /* Run Script */, 109 | 97C146EA1CF9000F007C117D /* Sources */, 110 | 97C146EB1CF9000F007C117D /* Frameworks */, 111 | 97C146EC1CF9000F007C117D /* Resources */, 112 | 9705A1C41CF9048500538489 /* Embed Frameworks */, 113 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */, 114 | ); 115 | buildRules = ( 116 | ); 117 | dependencies = ( 118 | ); 119 | name = Runner; 120 | productName = Runner; 121 | productReference = 97C146EE1CF9000F007C117D /* Runner.app */; 122 | productType = "com.apple.product-type.application"; 123 | }; 124 | /* End PBXNativeTarget section */ 125 | 126 | /* Begin PBXProject section */ 127 | 97C146E61CF9000F007C117D /* Project object */ = { 128 | isa = PBXProject; 129 | attributes = { 130 | LastUpgradeCheck = 1020; 131 | ORGANIZATIONNAME = ""; 132 | TargetAttributes = { 133 | 97C146ED1CF9000F007C117D = { 134 | CreatedOnToolsVersion = 7.3.1; 135 | LastSwiftMigration = 1100; 136 | }; 137 | }; 138 | }; 139 | buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */; 140 | compatibilityVersion = "Xcode 9.3"; 141 | developmentRegion = en; 142 | hasScannedForEncodings = 0; 143 | knownRegions = ( 144 | en, 145 | Base, 146 | ); 147 | mainGroup = 97C146E51CF9000F007C117D; 148 | productRefGroup = 97C146EF1CF9000F007C117D /* Products */; 149 | projectDirPath = ""; 150 | projectRoot = ""; 151 | targets = ( 152 | 97C146ED1CF9000F007C117D /* Runner */, 153 | ); 154 | }; 155 | /* End PBXProject section */ 156 | 157 | /* Begin PBXResourcesBuildPhase section */ 158 | 97C146EC1CF9000F007C117D /* Resources */ = { 159 | isa = PBXResourcesBuildPhase; 160 | buildActionMask = 2147483647; 161 | files = ( 162 | 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 163 | 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, 164 | 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 165 | 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, 166 | ); 167 | runOnlyForDeploymentPostprocessing = 0; 168 | }; 169 | /* End PBXResourcesBuildPhase section */ 170 | 171 | /* Begin PBXShellScriptBuildPhase section */ 172 | 3B06AD1E1E4923F5004D2608 /* Thin Binary */ = { 173 | isa = PBXShellScriptBuildPhase; 174 | buildActionMask = 2147483647; 175 | files = ( 176 | ); 177 | inputPaths = ( 178 | ); 179 | name = "Thin Binary"; 180 | outputPaths = ( 181 | ); 182 | runOnlyForDeploymentPostprocessing = 0; 183 | shellPath = /bin/sh; 184 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin"; 185 | }; 186 | 9740EEB61CF901F6004384FC /* Run Script */ = { 187 | isa = PBXShellScriptBuildPhase; 188 | buildActionMask = 2147483647; 189 | files = ( 190 | ); 191 | inputPaths = ( 192 | ); 193 | name = "Run Script"; 194 | outputPaths = ( 195 | ); 196 | runOnlyForDeploymentPostprocessing = 0; 197 | shellPath = /bin/sh; 198 | shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" build"; 199 | }; 200 | /* End PBXShellScriptBuildPhase section */ 201 | 202 | /* Begin PBXSourcesBuildPhase section */ 203 | 97C146EA1CF9000F007C117D /* Sources */ = { 204 | isa = PBXSourcesBuildPhase; 205 | buildActionMask = 2147483647; 206 | files = ( 207 | 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */, 208 | 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */, 209 | ); 210 | runOnlyForDeploymentPostprocessing = 0; 211 | }; 212 | /* End PBXSourcesBuildPhase section */ 213 | 214 | /* Begin PBXVariantGroup section */ 215 | 97C146FA1CF9000F007C117D /* Main.storyboard */ = { 216 | isa = PBXVariantGroup; 217 | children = ( 218 | 97C146FB1CF9000F007C117D /* Base */, 219 | ); 220 | name = Main.storyboard; 221 | sourceTree = ""; 222 | }; 223 | 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */ = { 224 | isa = PBXVariantGroup; 225 | children = ( 226 | 97C147001CF9000F007C117D /* Base */, 227 | ); 228 | name = LaunchScreen.storyboard; 229 | sourceTree = ""; 230 | }; 231 | /* End PBXVariantGroup section */ 232 | 233 | /* Begin XCBuildConfiguration section */ 234 | 249021D3217E4FDB00AE95B9 /* Profile */ = { 235 | isa = XCBuildConfiguration; 236 | buildSettings = { 237 | ALWAYS_SEARCH_USER_PATHS = NO; 238 | CLANG_ANALYZER_NONNULL = YES; 239 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 240 | CLANG_CXX_LIBRARY = "libc++"; 241 | CLANG_ENABLE_MODULES = YES; 242 | CLANG_ENABLE_OBJC_ARC = YES; 243 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 244 | CLANG_WARN_BOOL_CONVERSION = YES; 245 | CLANG_WARN_COMMA = YES; 246 | CLANG_WARN_CONSTANT_CONVERSION = YES; 247 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 248 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 249 | CLANG_WARN_EMPTY_BODY = YES; 250 | CLANG_WARN_ENUM_CONVERSION = YES; 251 | CLANG_WARN_INFINITE_RECURSION = YES; 252 | CLANG_WARN_INT_CONVERSION = YES; 253 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 254 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 255 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 256 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 257 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 258 | CLANG_WARN_STRICT_PROTOTYPES = YES; 259 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 260 | CLANG_WARN_UNREACHABLE_CODE = YES; 261 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 262 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 263 | COPY_PHASE_STRIP = NO; 264 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 265 | ENABLE_NS_ASSERTIONS = NO; 266 | ENABLE_STRICT_OBJC_MSGSEND = YES; 267 | GCC_C_LANGUAGE_STANDARD = gnu99; 268 | GCC_NO_COMMON_BLOCKS = YES; 269 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 270 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 271 | GCC_WARN_UNDECLARED_SELECTOR = YES; 272 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 273 | GCC_WARN_UNUSED_FUNCTION = YES; 274 | GCC_WARN_UNUSED_VARIABLE = YES; 275 | IPHONEOS_DEPLOYMENT_TARGET = 9.0; 276 | MTL_ENABLE_DEBUG_INFO = NO; 277 | SDKROOT = iphoneos; 278 | SUPPORTED_PLATFORMS = iphoneos; 279 | TARGETED_DEVICE_FAMILY = "1,2"; 280 | VALIDATE_PRODUCT = YES; 281 | }; 282 | name = Profile; 283 | }; 284 | 249021D4217E4FDB00AE95B9 /* Profile */ = { 285 | isa = XCBuildConfiguration; 286 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 287 | buildSettings = { 288 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 289 | CLANG_ENABLE_MODULES = YES; 290 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 291 | DEVELOPMENT_TEAM = WJ48SZA38U; 292 | ENABLE_BITCODE = NO; 293 | FRAMEWORK_SEARCH_PATHS = ( 294 | "$(inherited)", 295 | "$(PROJECT_DIR)/Flutter", 296 | ); 297 | INFOPLIST_FILE = Runner/Info.plist; 298 | LD_RUNPATH_SEARCH_PATHS = ( 299 | "$(inherited)", 300 | "@executable_path/Frameworks", 301 | ); 302 | LIBRARY_SEARCH_PATHS = ( 303 | "$(inherited)", 304 | "$(PROJECT_DIR)/Flutter", 305 | ); 306 | PRODUCT_BUNDLE_IDENTIFIER = com.souvikbiswas.responsiveDesign; 307 | PRODUCT_NAME = "$(TARGET_NAME)"; 308 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 309 | SWIFT_VERSION = 5.0; 310 | VERSIONING_SYSTEM = "apple-generic"; 311 | }; 312 | name = Profile; 313 | }; 314 | 97C147031CF9000F007C117D /* Debug */ = { 315 | isa = XCBuildConfiguration; 316 | buildSettings = { 317 | ALWAYS_SEARCH_USER_PATHS = NO; 318 | CLANG_ANALYZER_NONNULL = YES; 319 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 320 | CLANG_CXX_LIBRARY = "libc++"; 321 | CLANG_ENABLE_MODULES = YES; 322 | CLANG_ENABLE_OBJC_ARC = YES; 323 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 324 | CLANG_WARN_BOOL_CONVERSION = YES; 325 | CLANG_WARN_COMMA = YES; 326 | CLANG_WARN_CONSTANT_CONVERSION = YES; 327 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 328 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 329 | CLANG_WARN_EMPTY_BODY = YES; 330 | CLANG_WARN_ENUM_CONVERSION = YES; 331 | CLANG_WARN_INFINITE_RECURSION = YES; 332 | CLANG_WARN_INT_CONVERSION = YES; 333 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 334 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 335 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 336 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 337 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 338 | CLANG_WARN_STRICT_PROTOTYPES = YES; 339 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 340 | CLANG_WARN_UNREACHABLE_CODE = YES; 341 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 342 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 343 | COPY_PHASE_STRIP = NO; 344 | DEBUG_INFORMATION_FORMAT = dwarf; 345 | ENABLE_STRICT_OBJC_MSGSEND = YES; 346 | ENABLE_TESTABILITY = YES; 347 | GCC_C_LANGUAGE_STANDARD = gnu99; 348 | GCC_DYNAMIC_NO_PIC = NO; 349 | GCC_NO_COMMON_BLOCKS = YES; 350 | GCC_OPTIMIZATION_LEVEL = 0; 351 | GCC_PREPROCESSOR_DEFINITIONS = ( 352 | "DEBUG=1", 353 | "$(inherited)", 354 | ); 355 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 356 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 357 | GCC_WARN_UNDECLARED_SELECTOR = YES; 358 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 359 | GCC_WARN_UNUSED_FUNCTION = YES; 360 | GCC_WARN_UNUSED_VARIABLE = YES; 361 | IPHONEOS_DEPLOYMENT_TARGET = 9.0; 362 | MTL_ENABLE_DEBUG_INFO = YES; 363 | ONLY_ACTIVE_ARCH = YES; 364 | SDKROOT = iphoneos; 365 | TARGETED_DEVICE_FAMILY = "1,2"; 366 | }; 367 | name = Debug; 368 | }; 369 | 97C147041CF9000F007C117D /* Release */ = { 370 | isa = XCBuildConfiguration; 371 | buildSettings = { 372 | ALWAYS_SEARCH_USER_PATHS = NO; 373 | CLANG_ANALYZER_NONNULL = YES; 374 | CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; 375 | CLANG_CXX_LIBRARY = "libc++"; 376 | CLANG_ENABLE_MODULES = YES; 377 | CLANG_ENABLE_OBJC_ARC = YES; 378 | CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; 379 | CLANG_WARN_BOOL_CONVERSION = YES; 380 | CLANG_WARN_COMMA = YES; 381 | CLANG_WARN_CONSTANT_CONVERSION = YES; 382 | CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; 383 | CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; 384 | CLANG_WARN_EMPTY_BODY = YES; 385 | CLANG_WARN_ENUM_CONVERSION = YES; 386 | CLANG_WARN_INFINITE_RECURSION = YES; 387 | CLANG_WARN_INT_CONVERSION = YES; 388 | CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; 389 | CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; 390 | CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; 391 | CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; 392 | CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; 393 | CLANG_WARN_STRICT_PROTOTYPES = YES; 394 | CLANG_WARN_SUSPICIOUS_MOVE = YES; 395 | CLANG_WARN_UNREACHABLE_CODE = YES; 396 | CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; 397 | "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; 398 | COPY_PHASE_STRIP = NO; 399 | DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; 400 | ENABLE_NS_ASSERTIONS = NO; 401 | ENABLE_STRICT_OBJC_MSGSEND = YES; 402 | GCC_C_LANGUAGE_STANDARD = gnu99; 403 | GCC_NO_COMMON_BLOCKS = YES; 404 | GCC_WARN_64_TO_32_BIT_CONVERSION = YES; 405 | GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; 406 | GCC_WARN_UNDECLARED_SELECTOR = YES; 407 | GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; 408 | GCC_WARN_UNUSED_FUNCTION = YES; 409 | GCC_WARN_UNUSED_VARIABLE = YES; 410 | IPHONEOS_DEPLOYMENT_TARGET = 9.0; 411 | MTL_ENABLE_DEBUG_INFO = NO; 412 | SDKROOT = iphoneos; 413 | SUPPORTED_PLATFORMS = iphoneos; 414 | SWIFT_COMPILATION_MODE = wholemodule; 415 | SWIFT_OPTIMIZATION_LEVEL = "-O"; 416 | TARGETED_DEVICE_FAMILY = "1,2"; 417 | VALIDATE_PRODUCT = YES; 418 | }; 419 | name = Release; 420 | }; 421 | 97C147061CF9000F007C117D /* Debug */ = { 422 | isa = XCBuildConfiguration; 423 | baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; 424 | buildSettings = { 425 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 426 | CLANG_ENABLE_MODULES = YES; 427 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 428 | DEVELOPMENT_TEAM = WJ48SZA38U; 429 | ENABLE_BITCODE = NO; 430 | FRAMEWORK_SEARCH_PATHS = ( 431 | "$(inherited)", 432 | "$(PROJECT_DIR)/Flutter", 433 | ); 434 | INFOPLIST_FILE = Runner/Info.plist; 435 | LD_RUNPATH_SEARCH_PATHS = ( 436 | "$(inherited)", 437 | "@executable_path/Frameworks", 438 | ); 439 | LIBRARY_SEARCH_PATHS = ( 440 | "$(inherited)", 441 | "$(PROJECT_DIR)/Flutter", 442 | ); 443 | PRODUCT_BUNDLE_IDENTIFIER = com.souvikbiswas.responsiveDesign; 444 | PRODUCT_NAME = "$(TARGET_NAME)"; 445 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 446 | SWIFT_OPTIMIZATION_LEVEL = "-Onone"; 447 | SWIFT_VERSION = 5.0; 448 | VERSIONING_SYSTEM = "apple-generic"; 449 | }; 450 | name = Debug; 451 | }; 452 | 97C147071CF9000F007C117D /* Release */ = { 453 | isa = XCBuildConfiguration; 454 | baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; 455 | buildSettings = { 456 | ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; 457 | CLANG_ENABLE_MODULES = YES; 458 | CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; 459 | DEVELOPMENT_TEAM = WJ48SZA38U; 460 | ENABLE_BITCODE = NO; 461 | FRAMEWORK_SEARCH_PATHS = ( 462 | "$(inherited)", 463 | "$(PROJECT_DIR)/Flutter", 464 | ); 465 | INFOPLIST_FILE = Runner/Info.plist; 466 | LD_RUNPATH_SEARCH_PATHS = ( 467 | "$(inherited)", 468 | "@executable_path/Frameworks", 469 | ); 470 | LIBRARY_SEARCH_PATHS = ( 471 | "$(inherited)", 472 | "$(PROJECT_DIR)/Flutter", 473 | ); 474 | PRODUCT_BUNDLE_IDENTIFIER = com.souvikbiswas.responsiveDesign; 475 | PRODUCT_NAME = "$(TARGET_NAME)"; 476 | SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; 477 | SWIFT_VERSION = 5.0; 478 | VERSIONING_SYSTEM = "apple-generic"; 479 | }; 480 | name = Release; 481 | }; 482 | /* End XCBuildConfiguration section */ 483 | 484 | /* Begin XCConfigurationList section */ 485 | 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */ = { 486 | isa = XCConfigurationList; 487 | buildConfigurations = ( 488 | 97C147031CF9000F007C117D /* Debug */, 489 | 97C147041CF9000F007C117D /* Release */, 490 | 249021D3217E4FDB00AE95B9 /* Profile */, 491 | ); 492 | defaultConfigurationIsVisible = 0; 493 | defaultConfigurationName = Release; 494 | }; 495 | 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */ = { 496 | isa = XCConfigurationList; 497 | buildConfigurations = ( 498 | 97C147061CF9000F007C117D /* Debug */, 499 | 97C147071CF9000F007C117D /* Release */, 500 | 249021D4217E4FDB00AE95B9 /* Profile */, 501 | ); 502 | defaultConfigurationIsVisible = 0; 503 | defaultConfigurationName = Release; 504 | }; 505 | /* End XCConfigurationList section */ 506 | }; 507 | rootObject = 97C146E61CF9000F007C117D /* Project object */; 508 | } 509 | --------------------------------------------------------------------------------