Open Flutter Project: E-commerce App Flutter Widgets

Flutter is an awesome framework because everything is a widget. That is why on early stage of development it makes sense to build widget library that will help other team members keep the app consistent. Utilizing widgets saves time on building layout and logic of the app.

Here is widget description we are currently using in the app. Please, do not reinvent the wheel and use what is already there.

OpenFlutterActionCard

Makes a box with shadow that includes 4 elements: title, right link and child widget (RichText in example below).

OpenFlutterActionCard widget

OpenFlutterActionCard(
  title: 'Jane Doe',
  linkText: 'Change',
  onLinkTap: ( () => {
    widget.changeView(changeType: ViewChangeType.Exact, index: 2)
  }),
  child: RichText(
    text: TextSpan(
      text:"3 Newbridge Court Chino Hills, CA 91709, United States",
      style: _theme.textTheme.headline5.copyWith(
        color: _theme.primaryColor
      )
    ),
    maxLines: 2,
  )
)

Location: widgets/action_card.dart

OpenFlutterBlockHeader

Used on content screens as title, short description and “View All” link.

Example:

OpenFlutterBlockHeader(
  width: widgetWidth,
  title: ‘New’,
  linkText: ‘View All’,
  onLinkTap: ( () => {} ),
  description: ‘You’ve never seen it before!’,
),

Location: widgets/block_header.dart

OpenFlutterBlockSubtitle

OpenFlutterBlockSubtitle view

Example:

OpenFlutterBlockSubtitle(
title: 'Shipping Address',
width: width
)

Location: widgets/block_subtitle.dart

OpenFlutterEcommerceBottomMenu

Used in Scaffold widget.

Example:

OpenFlutterEcommerceBottomMenu(bottomMenuIndex)

Location: widgets/bottom_menu.dart

OpenFlutterBottomPopup

Creates bottom modal window with a child widget inside. Used in OpenFlutterSortBy widget and others.

Example:

OpenFlutterBottomPopup(
  title: 'Sort By',
  child: Container(
    padding: EdgeInsets.only(top: AppSizes.sidePadding),
    child:  Column(
      children:buildSortBy(fullWidth, _theme)
    )
  )
)

Location: widgets/bottom_popup.dart

OpenFlutterSelectValuesBoxes<T>

Boxes to select one of the values from the list.

Example:

OpenFlutterSelectValuesBoxes<String>(
  key: UniqueKey(),
  availableValues: state.availableSizes,
  selectedValues: state.selectedSizes,
  boxWidth: 50,
  label: 'Sizes',
  onClick: ( (List<String> newSelectedValues) =>{
    bloc..add(ProductChangeSelectedSizesEvent(newSelectedValues))
  }),
),

Location: widgets/box_value_select.dart

OpenFlutterCartTile

Product cart tile in the checkout.

There is a popup available when you click top right icon.

Example:

OpenFlutterCartTile(
  item: items[i],
  onChangeQuantity: ( (int quantity)=> {
    bloc..add(CartQuantityChangedEvent(
      productId: items[i].product.id,
      newQuantity: quantity
    ))
  }),
  onAddToFav: (int productId) {  },
  onRemoveFromCart: (int productId) {  },
)

Location: widgets/cart_tile.dart

OpenFlutterCatregoryListElement

A line with category title in a list like that

Example:

OpenFlutterCatregoryListElement(
  category: categories[i]))
)

Accepts Category as parameter.

Location: widgets/caregory_list_element.dart

OpenFlutterCategoryTile

Used in list of categories.

Example:

OpenFlutterCategoryTile(
  height: 100, 
  width: width, 
  category: categories[i]
)

Parameters are self-explanatory.

Location: widgets/category_tile.dart

OpenFlutterClickableLine

Represents a clickable line with customizable background color and text color, width and height and callback method.

Example:

OpenFlutterClickableLine(
height: 58,
width: width,
title: sortByVariantTitles[i],
sortBy: sortByVariants[i],
backgroundColor: sortByVariants[i] == currentSortBy ?
_theme.accentColor : null,
textColor: sortByVariants[i] == currentSortBy ? 
    AppColors.white : null,
onTap: ( (SortBy newSortBy) => { ... })
)

Location: widgets/clickable_line.dart

OpenFlutterColorSelect

Select color widget.

OpenFlutterColorSelect(
  key: UniqueKey(),
  availableColors: state.availableColors,
  selectedColors: state.selectedColors,
  onClick: ((List<Color> newSelectedColors)=>{
    bloc..add(ProductChangeSelectedColorsEvent(newSelectedColors))
  }),
  label: 'Colors',
),

Location: widgets/color_select.dart

OpenFlutterButton

Example:

OpenFlutterButton(
  onPressed: (() => {…}),
  title: “VIEW ALL ITEMS”,
  width: 200,  
  height: 50
)

Location: widgets/custom_button.dart

OpenFlutterCheckbox

Checkbox with label.

Example:

OpenFlutterCheckbox(
  width: width,
  title: 'Use as default payment method',
  checked: currentCardId==1,
  onTap: ((bool newValue)=> { _changeDefaultPaymentCard(bloc, 1) })
)

Location: widgets/custom_checkbox.dart

OpenFlutterDeliveryMethod

List of delivery methods (should be made dynamic in the future).

OpenFlutterDeliveryMethod()

Location: widgets/delivery_method.dart

OpenFlutterExpansionTile

Text line with expandable description.

Expanded view:

Example:

OpenFlutterExpansionTile(
  title: "Shipping info",
  description: widget.product.description,
)

Location: widgets/expansion_tile.dart

OpenFlutterFavouriteButton

Favorite icon button.

OpenFlutterFavouriteButton(
  favourite: favorite,
  setFavourite: ( () => {
    setFavourite(bloc)
  }),
)

Location: widgets/favourite_button.dart

OpenFlutterHashTagList

Constructor:

HashTagList({Key key, this.tags, this.onTap, this.height})

Location: widgets/hashtag_list.dart

OpenFlutterInputButton

Input field with a button at the right.

OpenFlutterInputButton(
  placeHolder: 'Enter your promo code',
  controller: _promoController,
  width: width,
  onClick: ( () => {
    bloc..add(CartShowPopupEvent())
  }),
)

Location: widgets/input_button.dart

OpenFlutterInputField

Example:

OpenFlutterInputField(
  key: emailKey,
  controller: emailController,
  hint: “Email”,
  validator: Validator.validateEmail,
  keyboard: TextInputType.emailAddress,
),

Location: widgets/input_field.dart

OpenFlutterLabelRightCheckbox

Label with a checkbox at the right.

The two views

Example:

OpenFlutterLabelRightCheckbox(
  width: width - AppSizes.sidePadding*2,
  checked: selected,
  title: brands[i].title,
  onChanged: ((bool value) { }),
)

Location: widgets/label_right_checkbox.dart

OpenFlutterMenuLine

Menu line with title and subtitle.

Example:

OpenFlutterMenuLine(
  title: "My orders",
  subtitle:  "Already Have 12 orders",
  onTap: ( () => { })
)

Location: widgets/menu_line.dart

OpenFlutterOrderTile

Order tile in my order list.

Example:

OpenFlutterOrderTile(
  order: orders[index],
  onClick: ((int orderId) => {  }),
)

Location: widgets/order_tile.dart

OpenFlutterPaymentCardPreview

Payment card preview with card holder name, card number and expiration month and year.

MasterCard view

Visa view

Example:

OpenFlutterPaymentCardPreview(
  width: width,
  cardNumber: '**** **** **** 4546',
  cardHolderName: 'Jennyfer Doe',
  expirationMonth: 11,
  expirationYear: 22,
  cardType: CardType.Visa
)

Location: widgets/payment_card_preview.dart

OpenFlutterPaymentCard

Example:

OpenFlutterPaymentCard(
  cardNumber: "**** **** **** 3947",
)

Location: widgets/payment_card.dart

OpenFlutterPriceRangeSlider

Example:

OpenFlutterPriceRangeSlider(
  min: 0,
  max: 300,
  start: state.priceRange.start,
  end: state.priceRange.end,
  label: 'Price range',
  onChanged: ( (RangeValues values) => { }),
)

Location: widgets/price_slider.dart

OpenFlutterProductCard

Used in the list of products. See list of two product card examples.

Example:

OpenFlutterProductCard(
  product: products[i], 
  height: height, 
  width: widgetWidth
)

There are two views supported by one widget.

Location: widgets/product_card.dart

OpenFlutterProductFilter

Example:

OpenFlutterProductFilter(
  width: width,
  height: 24,
  productView: productView,
  sortBy: sortBy,
  onFilterClicked: (() => {}),
  onChangeViewClicked: (() => {}),
  onSortClicked: ((SortBy sortBy) => {}),
)

Location: widgets/product_filter.dart

OpenFlutterProductListView

List view of product cards on home screens.

Example:

OpenFlutterProductListView(
  width: widgetWidth,
  products: widget.products
),

Location: widgets/product_list_view.dart

OpenFlutterProductRating

That little line with stars and count of reviews.

Example:

OpenFlutterProductRating(
  rating: product.rating,
  ratingCount: product.ratingCount
)

Location: widgets/product_rating.dart

OpenFlutterProductReviewItem

Product review item with rating, description and photos.

OpenFlutterProductReviewItem(
  rating: productReview.rating,
  writerName: productReview.authorName,
  isHelpfulMarked: productReview.isHelpful,
  comment: productReview.comment,
  avatarUrl: productReview.authorPhotoUrl,
  withPhotos: withPhotos,
  photos: productReview.photos,
)

Location: widgets/product_review_item.dart

OpenFlutterProductTile

Example:

OpenFlutterProductTile(
  product: products[i],
  height: 100,
  width: width — AppSizes.sidePadding * 2
)

There are two different views within one widget to support two views.

Location: widgets/product_tile.dart

OpenFlutterPromoTile

Promo item with description, discount percent,optional image and action button.

Example:

OpenFlutterPromoTile(
textColor: promos[i].textColor,
item: promos[i],
onClickApply: ( ()=> { }),
)

Location: widgets/promo_tile.dart

OpenFlutterRatingSummary

Review breakdown by rating.

Example:

OpenFlutterRatingSummary(
  barColor: Theme.of(context).accentColor,
  ratingQuantity: widget.product.ratingCount,
  rating: widget.product.rating,
  ratingDetail: mapRatingDetail(),
)

Location: widgets/rating_summary.dart

OpenFlutterScaffold

General Scaffold for the app. Right now has two variants

Without tabs (body element widget view was cut to make image smaller):

Example:

OpenFlutterScaffold(
  background: null,
  title: “Categories”,
  body: CategoriesListView(changeView: changePage),
  bottomMenuIndex: 1,
)

With Tabs (body element widget view was cut to make image smaller):

Example:

OpenFlutterScaffold(
  background: null,
  title: “Categories”,
  bottomMenuIndex: 1,
  tabController: _tabController,
  tabBarList: this.types,
  body:TabBarView(
    children: tabViews,
    controller: _tabController,
  )
)

Location: widgets/scaffold.dart

OpenFlutterRightArrow

That little red arrow.

Example:

OpenFlutterRightArrow(
  “Already have an account”,
  onClick: _showSignInScreen,
)

Location: widgets/right_arrow_button.dart

OpenFlutterSearchBar

Top search bar.

Example:

OpenFlutterSearchBar(
  searchKey: state.brandSearchKey,
  onChange: ( (String text) => { }),
)

Location: widgets/search_bar.dart

OpenFlutterServiceButton

Two variants of service button can be found on sign up screen.

Example:

OpenFlutterServiceButton(
  serviceType: ServiceType.Google,
  onPressed: () {…},
)

Location: widgets/service_button.dart

OpenFlutterSortBy

Example:

OpenFlutterSortBy(
  currentSortBy: state.sortBy,
  onSelect: ( (SortBy newSortBy)=>{ ... })
)

Accepts current sort by value and callback method when user selects new value.

Location: widgest/sortby.dart

OpenFlutterSummaryLine

OpenFlutterSummaryLine view

Example:

OpenFlutterSummaryLine(
  title: 'Order',
  summary: '\$112'
)

Location: widgets/summary_line.dart

OpenFlutterTextTile

Example:

OpenFlutterTextTile(
  title: 'Brand',
  subtitle: 'Subtitle goes here',
  onClick: ( () => { })
)

Location: widgets/text_tile.dart

Why did we put it all here?

Please, use widgets available in the project to save your own time and time of other team members who will review your code.

The code is available on github.

Open Flutter E-commerce App design.

Regards,

Andrey