Overview

Core Ux is a comprehensive library situated in core platform which contains UI components and allows developers build UI faster. To build buttons in our applications it is recommended to use hubtel buttons HBButton. In this tutorial, we will build action buttons for our example application Hubsell.

Installation

Core ux is a library in core platform hence to install it, you have to add the core platform library to you project.

dependencies:
  core_platform:
    git:
      url: [email protected]:v3/hubtel/Mobile-Apps/Platform-Library-Flutter-Core-Platform
      ref: 1.0.36 //Use updated version

Solid Buttons

Solid Text Buttons.

To build a solid text button, the core UX library provides developers with an HBTextButton class that enables developers to build text buttons faster. To build a simple text button. HBTextButton has the HBTextButton.solid factory method used to build solid buttons.

1. Sample code to build an orange button like the button below in our hubsell app.

HBTextButton.solid(title: "Buy Food",onPressed: (){
                    /// Action
                },
                backgroundColor: Colors.orange,
        )

By Default, the button resizes according to the intrinsic width of the Text widget imposed by the number of text characters. To build a solid button that fills the width of the screen with a set horizontal padding, you can do that with the help of flutter's padding widget and Sized box widget.

2. Sample code to build an orange button that fills the screen with a horizontal padding of 16.

Padding(
    padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingDefault),
    child: SizedBox(
        width: double.infinity,
        child: HBTextButton.solid(title: "Buy Food",onPressed: (){
                    /// Action
        },
        backgroundColor: Colors.orange,
        )
         ),
     )

Outline Buttons.

Outline Text Buttons.

To build an outline text button, the core UX library provides developers with an HBTextButton class that enables developers to build text buttons faster. To build a simple text button. HBTextButton has the HBTextButton.outline factory method used to build outline buttons.

1. Sample code to build an orange button like the button below in our hubsell app.

 HBTextButton.outlined(
    title: "Buy Food", 
    outlineColor: Colors.orange, 
    borderWidth: 2,
    ),

2. Sample code to build an orange button that fills the screen with a horizontal padding of 16.

Padding(
    padding: const EdgeInsets.symmetric(horizontal: Dimens.paddingDefault),
    child: SizedBox(
        width: double.infinity,
        child: HBTextButton.outlined(title: "Buy Food",onPressed: (){
                    /// Action
        },
        outlineColor: Colors.orange,
        )
         ),
     )