{"id":13552576,"url":"https://github.com/zubairehman/Portfolio-Demo","last_synced_at":"2025-04-03T03:32:16.609Z","repository":{"id":49141352,"uuid":"202363125","full_name":"zubairehman/Portfolio-Demo","owner":"zubairehman","description":"A portfolio build by using flutter for web.","archived":false,"fork":false,"pushed_at":"2022-02-26T11:41:36.000Z","size":964,"stargazers_count":408,"open_issues_count":3,"forks_count":101,"subscribers_count":11,"default_branch":"master","last_synced_at":"2025-03-30T05:05:33.668Z","etag":null,"topics":["dart","dart-web","flutter","flutter-web","portfolio","portfolio-template","responsive","responsive-web-design"],"latest_commit_sha":null,"homepage":"http://zubair-portfolio.surge.sh/","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zubairehman.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-14T14:06:53.000Z","updated_at":"2025-03-15T23:41:18.000Z","dependencies_parsed_at":"2022-08-21T16:00:20.217Z","dependency_job_id":null,"html_url":"https://github.com/zubairehman/Portfolio-Demo","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zubairehman%2FPortfolio-Demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zubairehman%2FPortfolio-Demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zubairehman%2FPortfolio-Demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zubairehman%2FPortfolio-Demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zubairehman","download_url":"https://codeload.github.com/zubairehman/Portfolio-Demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246933421,"owners_count":20857049,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","dart-web","flutter","flutter-web","portfolio","portfolio-template","responsive","responsive-web-design"],"created_at":"2024-08-01T12:02:06.266Z","updated_at":"2025-04-03T03:32:11.585Z","avatar_url":"https://github.com/zubairehman.png","language":"Dart","funding_links":[],"categories":["Dart"],"sub_categories":[],"readme":"# Portfolio\n\nA portfolio build by using flutter for web.\n\n## Demo\n\n\u003cp\u003e\n  \u003cimg src=\"screenshots/portfolio.png\"\u003e\n\u003c/p\u003e\n\n## How to Create and Deploy\nFollow the links below to learn more about how to create and deploy web applications in flutter.\n\n* Flutter For Web: [A Complete Guide to Create \u0026 Run a Web Application](https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956)\n\n* Flutter For Web: [A Complete Guide to Deploy a Web Application](https://medium.com/@zubairehman.work/flutter-for-web-a-complete-guide-to-deploy-a-web-application-3fa9463377a8)\n\n## How to Use \n\n**Step 1:**\n\nDownload or clone this repo by using the link below:\n\n```\nhttps://github.com/zubairehman/Portfolio-Demo.git\n```\n\n**Step 2:**\n\nGo to project root and execute the following command in console to get the required dependencies: \n\n``` \nflutter pub get \n```\n\n**Step 3:**\n\nTo use the Flutter SDK with the flutter_web preview make sure you have upgraded Flutter to at least v1.5.4 by running flutter upgrade from your machine. Follow the link to learn more about how to configure flutter for web: https://medium.com/@zubairehman.work/flutter-for-web-c75011a41956\n\n**Step 4:**\n\nTo run this application simply type in the following command:\n\n```\nflutter packages pub global run webdev serve\n```\n\n## Folder Structure\nHere is the core folder structure which flutter provides.\n\n```\nflutter-app/\n|- android\n|- build\n|- ios\n|- lib\n|- test\n```\n\nHere is the folder structure we have been using in this project\n\n```\nlib/\n|- constants/\n|- ui/\n|- utils/\n|- widgets/\n|- main.dart\n```\n\nNow, lets dive into the lib folder which has the main code for the application.\n\n```\n1- constants - All the application level constants are defined in this directory with-in their respective files. This directory contains the constants for `theme`, `dimentions`, `api endpoints`, `preferences` and `strings`.\n2- ui — Contains all the ui of your project, contains sub directory for each screen.\n3- util — Contains the utilities/common functions of your application.\n4- widgets — Contains the common widgets for your applications. For example, Button, TextField etc.\n5- main.dart - This is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.\n```\n\n### Constants\n\nThis directory contains all the application level constants. A separate file is created for each type as shown in example below:\n\n```\nconstants/\n|- assets.dart\n|- fonts.dart\n|- strings.dart\n|- text_styles.dart\n```\n\n### UI\n\nThis directory contains all the ui of your application. Each screen is located in a separate folder making it easy to combine group of files related to that particular screen. All the screen specific widgets will be placed in `widgets` directory as shown in the example below:\n\n```\nui/\n|- login\n   |- login_screen.dart\n   |- widgets\n      |- login_form.dart\n      |- login_button.dart\n```\n\n### Utils\n\nContains the common file(s) and utilities used in a project. The folder structure is as follows: \n\n```\nutils/\n|- encryption\n   |- xxtea.dart\n|- date\n  |- date_time.dart\n```\n\n### Widgets\n\nContains the common widgets that are shared across multiple screens. For example, Button, TextField etc.\n\n```\nwidgets/\n|- app_icon_widget.dart\n|- empty_app_bar.dart\n|- progress_indicator.dart\n```\n\n### Main\n\nThis is the starting point of the application. All the application level configurations are defined in this file i.e, theme, routes, title, orientation etc.\n\n```\nimport 'package:flutter_web/material.dart';\nimport 'package:portfolio/ui/home.dart';\n\nimport 'package:portfolio/utils/screen/screen_utils.dart';\n\nvoid main() {\n  runApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n\n  @override\n  Widget build(BuildContext context) {\n\n    return MaterialApp(\n      debugShowCheckedModeBanner: false,\n      theme: ThemeData(\n          brightness: Brightness.light,\n          primaryColorBrightness: Brightness.light,\n          accentColorBrightness: Brightness.light\n      ),\n      home: MyAppChild(),\n    );\n  }\n}\n\nclass MyAppChild extends StatefulWidget {\n\n  @override\n  _MyAppChildState createState() =\u003e _MyAppChildState();\n}\n\nclass _MyAppChildState extends State\u003cMyAppChild\u003e {\n  @override\n  Widget build(BuildContext context) {\n    // instantiating ScreenUtil singleton instance, as this will be used throughout\n    // the app to get screen size and other stuff\n    ScreenUtil.instance = ScreenUtil.getInstance()..init(context);\n    return HomePage();\n  }\n}\n```\n\nIf you liked my work, don’t forget to ⭐ star the repo to show your support.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzubairehman%2FPortfolio-Demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzubairehman%2FPortfolio-Demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzubairehman%2FPortfolio-Demo/lists"}