Flutter on CodePen
Introduction
In this post, we shall discuss how to use flutter in codePen. This platform enables the developers or designers to showcase and test their code snippets created using flutter, HTML, CSS, JaveScript. CodePen is really an amazing platform to share or snippets and design with thousands of developer and we also take lots of comments, suggestions, and lots of advice form great designers and experts. There are lots of views available in codepen which help us to explore more.
Codepen provides various core features such as pen editor, project editor, collection, Assets Hosting, Embeds, APIs.
Table of contents:
: Why codepen is different from DartPad?
What is flutter?
Flutter is Google’s UI toolkit for building beautiful, fast, native android, ios, and web app’s applications using a single code base called dart.
If you are new to flutter you can get started by reading the official documentation on flutter.dev
Flutter – Beautiful native apps in record time
Flutter is Google’s UI toolkit for crafting beautiful, natively compiled applications for mobile, web, and desktop from…flutter.dev
Roadmap To Become A Flutter Developer (Resources for Beginners)
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from…medium.com
What is codePen?
CodePen is an online community for testing and showcasing user-created flutter, HTML, CSS, and javascript code snippets.
Why codePen:-
- The flavor of flutter, HTML, CSS, and JavaScript
- Vim Key Bindings provides command-line keyboard shortcuts
- Emmet toolkit provides flexibility to projects
- Provides Collections and Tags
- Different views for pens (Editor, Details, Full Page, Debug View)
- Pro views (Professor Mode, Collab Mode, Live View, Presentation Mode)
- Good Community Support
Why codepen is better then DartPad?
DartPad is also good to share or test code snippets with other developer but codepen provides us with a good community of designers and developers. It helps us a lot in getting feedbacks from other experts developer and designers. It as lots of active members which helps us in promoting our designs or snippets.
Flutter on CodePen :
- Visit the codepen.io and Sign Up or log in.
- After logging in you will be directed to the following page, then go to the pen section and click on the Flutter Pen tab.
This is how your first flutter app on codepen looks like….
This is a pretty and simple app with codepen provides as a default app with flutter.
Codepen is also good at providing syntax errors…
Try templates
Search for flutter or go to https://codepen.io/topic/flutter/templates
There are lots of templates available made by some pro designers. So let’s try one of them:-
My Pen using flutter
I tried to build a search feature and add items to cart demo and this is how its look: Let me describe my pen…
There is two class in it SearchScreen, CartScreen. I have tried to keep the logic simple and easily understandable. There is an array ITEM_LIST that contains Item and each item gets updated every time we increase or decrease the quantity, in the CartScreen class the buyingItems list contains the Item whose quantity is greater than 0, and I have used the for loop to calculate the price of the total bag.
Item Class :
This is a simple model class that describes the properties of items such as name, price, quantity, etc…
class Item {
final String name;
final int price;
final String id;
int quantity;
bool add;
final String imageUrl;
Item({
@required this.name,
@required this.add,
@required this.imageUrl,
@required this.quantity,
@required this.price,
@required this.id,
});
}
Search Item logic :
SearchList is the list of Item whose name contains the text searched by the users. This list gets updated every time the user searches for the Item in the searchBar.
List<Item> searchList =
ITEM_LIST.where((element) => element.name.contains(text)).toList();
TextFormField :
TextFormField(
onFieldSubmitted: (covariant) {
setState(() {
text = covariant;
});
},
decoration: InputDecoration(
prefixIcon: Icon(
Icons.search,
),
hintText: "Search 20+ Products",
hintStyle: TextStyle(fontSize: 15)),
)
Cart Item and price logic :
buyingItems list is the list of items whose quantity is greater than 0.
List<Item> buyingItems =
ITEM_LIST.where((element) => element.quantity > 0).toList();
This list gets updated every time the user adds a product to its cart.
price logic :
int price = 0;
for (int i = 0; i < buyingItems.length; i++) {
price = buyingItems[i].price * buyingItems[i].quantity + price;
}
Item Widget :
Column(
children: <Widget>[
Container(
height: 150,
child: Row(
children: <Widget>[
Container(
height: 150,
width: 150,
child: Image.asset(
buyingItems[index].imageUrl,
fit: BoxFit.fill,
),
),
Padding(
padding: const EdgeInsets.all(12),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
buyingItems[index].name,
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 18,
color: Colors.black87,
),
),
Row(
children: <Widget>[
Container(
height: 15,
child: Padding(
padding: const EdgeInsets.only(
left: 5, right: 5),
child: Row(
children: <Widget>[
Text(
stars[index].toString(),
style: TextStyle(
color: Colors.orangeAccent),
),
Icon(
Icons.star,
color: Colors.orangeAccent,
size: 15,
)
],
),
),
decoration: BoxDecoration(
color: Colors.orange.withOpacity(0.1),
borderRadius: BorderRadius.circular(4)),
),
Text(
" ${rating[index]} Ratings",
style: TextStyle(
color: Colors.grey, fontSize: 13),
),
],
),
Row(
children: <Widget>[
Text(
"MRP: ",
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 13,
color: Colors.grey,
),
),
Text(
"Rs ${(buyingItems[index].price + (buyingItems[index].price * 0.4)).toString()}",
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 13,
color: Colors.grey,
decoration: TextDecoration.lineThrough,
),
),
],
),
Container(
width: MediaQuery.of(context).size.width - 180,
height: 50,
child: Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
"Rs ${buyingItems[index].price.toString()}",
style: TextStyle(
fontWeight: FontWeight.w800,
fontSize: 18,
),
),
buyingItems[index].quantity == 0
? Padding(
padding: const EdgeInsets.all(8.0),
child: FlatButton(
color: Colors.red,
child: Text(
"ADD",
style: TextStyle(
color: Colors.white),
),
onPressed: () {
setState(() {
buyingItems[index].add = true;
buyingItems[index].quantity++;
});
},
),
)
: Row(
children: <Widget>[
IconButton(
icon: Icon(
Icons.remove_shopping_cart,
color:
Colors.red.withOpacity(0.7),
),
onPressed: () {
setState(() {
buyingItems[index].quantity--;
});
},
),
Text(
buyingItems[index]
.quantity
.toString(),
style: TextStyle(
color:
Colors.deepOrangeAccent,
fontWeight: FontWeight.w700,
fontSize: 20),
),
IconButton(
icon: Icon(
Icons.shopping_cart,
color: Colors.green,
),
onPressed: () {
setState(() {
buyingItems[index].quantity++;
});
},
)
],
)
],
),
),
],
),
)
],
),
),
Divider(
thickness: 3,
)
],
)
You can check out my pen here
Thanks for reading this article ❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences!.
