|
1 | | -# pub_dev |
| 1 | +[](https://gallery.codelessly.com/flutterwebsites/pub?utm_medium=image&utm_campaign=cover) |
| 2 | +# [Pub.dev Website - Rebuilt in Flutter](https://gallery.codelessly.com/flutterwebsites/pub) |
| 3 | +[](https://github.com/Codelessly/ResponsiveFramework) [](https://github.com/Codelessly/FlutterWebsite/releases) [](https://github.com/Codelessly/FlutterWebsite/releases) [](https://github.com/Codelessly/FlutterWebsite/issues) [](https://github.com/Codelessly/FlutterWebsite) [](https://github.com/Codelessly/FlutterWebsite) [](https://libraries.io/github/Codelessly/FlutterWebsite) [](https://opensource.org/licenses/0BSD) |
2 | 4 |
|
3 | | -The pub.dev website recreated in Flutter. |
| 5 | +<img src="web/icons/Icon-192.png" width="128"> |
4 | 6 |
|
5 | | -## Getting Started |
| 7 | +> ### The pub.dev website, rebuilt in Flutter with 💙! |
6 | 8 |
|
7 | | -This project is a starting point for a Flutter application. |
| 9 | +[View Pub.dev Website](https://gallery.codelessly.com/flutterwebsites/pub) |
8 | 10 |
|
9 | | -A few resources to get you started if this is your first Flutter project: |
| 11 | +[Skia Version](https://gallery.codelessly.com/flutterwebsites/pub/skia) |
10 | 12 |
|
11 | | -- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab) |
12 | | -- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook) |
| 13 | +## Screenshots |
13 | 14 |
|
14 | | -For help getting started with Flutter, view our |
15 | | -[online documentation](https://flutter.dev/docs), which offers tutorials, |
16 | | -samples, guidance on mobile development, and a full API reference. |
| 15 | +|Desktop|Tablet|Mobile| |
| 16 | +|--|--|--| |
| 17 | +|||| |
| 18 | + |
| 19 | +## The Concept |
| 20 | + |
| 21 | +Pub.dev was recreated in Flutter for 3 primary reasons: |
| 22 | + |
| 23 | +1. Iteratively develop the [Responsive Framework](https://github.com/Codelessly/ResponsiveFramework) and scenario test the library by creating real world websites. The way to make the Responsive Framework the best Flutter web framework is by building actual Flutter websites! |
| 24 | +2. Investigate the need for a [Flutter App UI and Website Builder](https://codelessly.com). Does Flutter make web development so easy that Codelessly becomes redundant? |
| 25 | +3. Promote Flutter Web and convince more developers to start building Flutter Web components! |
| 26 | + |
| 27 | +## The Build |
| 28 | + |
| 29 | +I envisioned this build as a weekend project and estimated that it would take less than 20 hours. Unfortunately, replicating some web behavior took a bit longer than I expected and the build ended up taking 27 hours. |
| 30 | + |
| 31 | +Because I had built a few Flutter websites before, I factored in my increased proficiency and speed. Also, since I've already solved many Flutter web challenges with the Responsive Framework, I estimated that would save me even more time. |
| 32 | + |
| 33 | +- **Website elements (14h)** |
| 34 | + - New project setup and icons (1.5h) |
| 35 | + - Stylesheet creation (1h) |
| 36 | + - Collecting UI images and icons (1h) |
| 37 | + - Pub package data and links (2h) |
| 38 | + - UI elements (8.5h) |
| 39 | +- **Responsive Framework (13h)** |
| 40 | + - General website responsiveness (0.5h) |
| 41 | + - Thanks Responsive Framework!! |
| 42 | + - ResponsiveGridView creation (10h) |
| 43 | + - Other responsive elements (2.5h) |
| 44 | +- **Publishing (7h)** |
| 45 | + - Code cleanup and testing (2h) |
| 46 | + - Writeup and screenshots (5h) |
| 47 | + |
| 48 | +## Final Thoughts |
| 49 | + |
| 50 | +Flutter Web is not an out of the box solution that lets anyone create a website easily. Flutter widgets are obviously built for mobile and replicating simple web behavior requires creative thinking or writing custom widgets. Writing custom widgets such as reimplementing a GridView takes time and requires a level of familiarity with Flutter. |
| 51 | + |
| 52 | +However, building websites with Flutter has many advantages over traditional web development such as dramatically lower maintenance costs and high visual fidelity. In these early days, the lack of off-the-shelf Flutter Web components necessitates writing components ourselves which takes a long time. |
| 53 | + |
| 54 | +As for Codelessly, this experiment has demonstrated there is an opportunity to make Flutter web development simpler and dramatically decrease development time. Instead of a website build taking over 20 hours, building a production-level frontend should take less than 20 minutes. |
| 55 | + |
| 56 | +[Signup for the Codelessly Beta](https://codelessly.com/?utm_medium=link&utm_campaign=beta_signup) |
| 57 | + |
| 58 | +## About |
| 59 | + |
| 60 | +We love pub.dev which we visit everyday. The packages created by the Flutter community save people many hours. Here at Codelessly, we're building a Flutter app UI and website builder to increase productivity and save people even more hours! If that sounds interesting, you'll want to subscribe to updates below 😎 |
| 61 | + |
| 62 | +The Pub.dev Template is licensed under Zero-Clause BSD and released as Emailware. If you like this project or it helped you, please subscribe to updates. Although it is not required, you might miss the goodies we share! |
| 63 | + |
| 64 | +<a href="https://codelessly.com/?utm_medium=banner&utm_campaign=newsletter_subscribe" target="_blank"><img src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Email%20Newsletter%20Signup.png"></a> |
| 65 | + |
| 66 | +## Acknowledgements ❤️ |
| 67 | + |
| 68 | +**Development:** |
| 69 | +* [Ray Li](https://github.com/searchy2) |
| 70 | + |
| 71 | +**Sponsor:** [Codelessly - Flutter App UI and Website Builder](https://codelessly.com/?utm_medium=link&utm_campaign=direct) |
| 72 | + |
| 73 | +<a href="mailto:ray@codelessly.com"> |
| 74 | + <img alt="Codelessly Email" |
| 75 | + src="https://lh3.googleusercontent.com/yN_m90WN_HSCohXdgC2k91uSTk9dnYfoxTYwG_mv_l5_05dV2CzkQ1B6rEqH4uqdgjA=w96" /> |
| 76 | +</a> |
| 77 | +<a href="https://codelessly.com/?utm_medium=icon&utm_campaign=direct"> |
| 78 | + <img alt="Codelessly Website" |
| 79 | + src="https://lh3.googleusercontent.com/YmMGcgeO7Km9-J9vFRByov5sb7OUKetnKs8pTi0JZMDj3GVJ61GMTcTlHB7u9uHDHag=w96" /> |
| 80 | +</a> |
| 81 | +<a href="https://twitter.com/BuildCodelessly"> |
| 82 | + <img alt="Codelessly Twitter" |
| 83 | + src="https://lh3.ggpht.com/lSLM0xhCA1RZOwaQcjhlwmsvaIQYaP3c5qbDKCgLALhydrgExnaSKZdGa8S3YtRuVA=w96" /> |
| 84 | +</a> |
| 85 | +<a href="https://github.com/Codelessly"> |
| 86 | + <img alt="Codelessly GitHub" |
| 87 | + src="https://lh3.googleusercontent.com/L15QqmKK7Vl-Ag1ZxaBqNQlXVEw58JT2BDb-ef5t2eboDh0pPSLjDgi3-aQ3Opdhhyk=w96" /> |
| 88 | +</a> |
| 89 | +<br></br> |
| 90 | +<a href="https://github.com/Codelessly/ResponsiveFramework"> |
| 91 | + <img alt="Built with Responsive Framework" |
| 92 | + src="https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20with%20Responsive%20Badge.png" /> |
| 93 | +</a> |
| 94 | + |
| 95 | + |
| 96 | +## License |
| 97 | +### Website Template |
| 98 | + |
| 99 | + BSD Zero Clause License |
| 100 | + |
| 101 | + Copyright © 2020 Codelessly |
| 102 | + |
| 103 | + Permission to use, copy, modify, and/or distribute this software for any |
| 104 | + purpose with or without fee is hereby granted. |
| 105 | + |
| 106 | + THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH |
| 107 | + REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY |
| 108 | + AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, |
| 109 | + INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM |
| 110 | + LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR |
| 111 | + OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR |
| 112 | + PERFORMANCE OF THIS SOFTWARE. |
| 113 | + |
| 114 | +### pub.dev |
| 115 | + |
| 116 | + Except as otherwise noted, the content of this repository is licensed under the |
| 117 | + Creative Commons Attribution 3.0 License [1], and code samples are licensed |
| 118 | + under the BSD License: |
| 119 | + |
| 120 | + Copyright 2012, the project authors. All rights reserved. Redistribution and use |
| 121 | + in source and binary forms, with or without modification, are permitted provided |
| 122 | + that the following conditions are met: |
| 123 | + |
| 124 | + * Redistributions of source code must retain the above copyright |
| 125 | + notice, this list of conditions and the following disclaimer. |
| 126 | + * Redistributions in binary form must reproduce the above |
| 127 | + copyright notice, this list of conditions and the following |
| 128 | + disclaimer in the documentation and/or other materials provided |
| 129 | + with the distribution. |
| 130 | + * Neither the name of Google Inc. nor the names of its |
| 131 | + contributors may be used to endorse or promote products derived |
| 132 | + from this software without specific prior written permission. |
| 133 | + |
| 134 | + THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS |
| 135 | + "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT |
| 136 | + LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR |
| 137 | + A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT |
| 138 | + OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, |
| 139 | + SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT |
| 140 | + LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, |
| 141 | + DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY |
| 142 | + THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT |
| 143 | + (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE |
| 144 | + OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. |
| 145 | + |
| 146 | + [1] http://creativecommons.org/licenses/by/3.0/ |
0 commit comments