Morioh
Login
Selam Girma

Selam Girma

3 years ago

Astroplant Mobile Application with Flutter

Astroplant mobile application

Libraries & Tools Used

Project structure

Here is the folder structure we have been using in this project

lib/
|- di/
|- models/
|- repositories/
	|- api/
|- ui/
	|- widgets/
	|- components/
	|- screens/
|- utils/
|- main.dart
|- routes.dart

Now, lets dive into the lib folder which has the main code for the application.

1- di - Dependency injection
2- models - Contains the data layer of your project
3- repositories - Contains network/api, local/persistence
4- ui  —  Contains all the ui of your project
	- widgets  —  Contains the common widgets for your applications. For example, Button, TextField etc.
	- components - Specific components to the application build with custom widgets
	- screens - Pages of the application, each screen is located in a separate folder making it easy to combine group of files related to that particular screen. 
5- util  —  Contains the utilities/common functions of your application.
7- routes.dart  —  This file contains all the routes for your application.
8- 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.

Astroplant Custom Widgets

Documentation

Input Form

Input form

Sample Usage
    CTextInput(  
      textHint: "Password",
      textColor: Color(0xFFDCDCDC),
      isPasswordType: true,
      icon: Icon(Icons.search, color: Colors.lightGreenAccent), 
      backgroundColor: Color(0xFF1D1D1D)
      fontSize: 18
    ),

Checkbox Form

Sample Usage
    CToggleSwitch(  
	  value: status,  
	  width: 35,  
	  height: 20,  
	  toggleSize: 15,  
	  onToggle: (val) {  
		  setState(() {  
			  status = val;  
		 });
	  }
	)

Button Form

Button form

Sample Usage
CButton(
	text: "Kit1 : AFC58",
	colorText: CColors.black,
	colorBackground: CColors.primary,
	fontSize: 16,
	height: 40,
	borderRadius: BorderRadius.only(
	    bottomLeft: const Radius.circular(40.0),
	    topLeft: const Radius.circular(40.0)),
	prefixIcon: Icon(
	    Icons.autorenew,
	    color: CColors.black
	),
	onPressed: () { },
      ),

Bottom Navigation Bar

Sample Usage
   return Scaffold(
	    bottomNavigationBar: CBottomNav(  
		    items: [  
			  CBottomNavItem(CustomIcons.dashboard),  
			  CBottomNavItem(CustomIcons.commands),  
			  CBottomNavItem(CustomIcons.settings),  
			],  
		    iconStyle: IconStyle(size: 23),
		    color: Colors.green,
		    backgroundColor: CColors.black
		),
	)
Props
Name Explanation Default
index starting index 0
onTap callback when a bottom nav item is pressed null
items bottom nav items null
backgroundColor background color Color(0xFF1B1E2F)
color color of the selected item border Color(0xFF6F717C)
iconStyle icon styles (size, onSelectSize, color, onSelectColor) null

CCard

Sample Usage
   return CCard(
                    body: CColumnText(
                      title: "Temp",
                      subTitle: "Identifier : #127",
                      description: "Virtual temperature sensor",
                      colorText: CColors.white,

                    ),
                    colorBackground: Color.fromRGBO(29, 29, 29, 1),
                    onPressed: () {
                      ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                        content: const Text('onPressed CCard'),
                      ));
                    },
                    suffixWidget: Container(
                      alignment: Alignment.topRight,
                      child: IconButton(
                        icon: Icon(Icons.arrow_forward_ios),
                        color: CColors.white,
                        onPressed: () {
                          ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                            content: const Text('onPressed suffixWidget'),
                          ));
                        },

                      ),
                    ),
                  )
Props
Name Explanation
colorBackground the backgroud color of the card
width the width of the card
height the height of the card
borderRadius the raduis of the card
padding padding of the card
onPressed (required) callback when the card is pressed
body the main widget that the Card display
suffixWidget widget in the right of the body widget always stick to the end

CColumnText

Description

Show three texts in column (title, subtitle and description)

Sample Usage
   return CColumnText(
                      title: "Temp",
                      subTitle: "Identifier : #127",
                      description: "Virtual temperature sensor",
                      colorText: CColors.white,

                    ),
Props
Name Explanation
colorText the color of the three texts
fontSize fontsize of the title, subTitle and description take fontsize-2
title a text with size = fontsize, color = colorText
subTitle a text with size = fontsize-2, color = colorText.withOpacity(0.5)
description a text with size = fontsize-2, color = colorText.withOpacity(0.25)
spaceBetween space between the three texts

Peripheral Card (CCardPeripheral)

CCardPeripheral(  
  title: "Air Co² Sensor",  
  subtitle: "Carbon concentration",  
  measure: "550",  
  unit: "ppm",  
  onPressed: () {},
  activeToggle: false,
),

Widget Toggle (CToggleWidget)

A horizontal set of toggle buttons that can be used with any Widget. The widget toggle manages its own state.

Sample Usage

With CCardPeripheral as children

CToggleWidget(
   onPressed: (index) { log("card pressed $index "); }, 
   children: [  
      CCardPeripheral(  
         title: "Air Co² Sensor",  
         subtitle: "Carbon concentration",  
         measure: "550",  
         unit: "ppm",  
         onPressed: () {},  
      ),  
      CCardPeripheral(  
         title: "Temperature",  
         subtitle: "Temperature",  
         measure: "18",  
         unit: "°C",  
         onPressed: () {},  
      ),  
      CCardPeripheral(  
         title: "Air Co² Sensor",  
         subtitle: "Carbon concentration",  
         measure: "550",  
         unit: "ppm",  
         onPressed: () {},  
      ),
   ]
)

With CButton as children

CToggleWidget(  
   onPressed: (index) {  
     log("button pressed " + index.toString());  
    },  
   defaultSelectedIndex: 0,  
   children: [  
      CButton(  
         fontSize: 14,  
         borderRadius: BorderRadius.circular(5),  
         text: "Month",  
         onPressed: () {  log("pressed month button"); }, 
         disabled: true,  
     ),  
     CButton(  
        fontSize: 14,  
        text: "Year",  
        onPressed: () {  log("pressed year button"); },  
        borderRadius: BorderRadius.circular(5),  
        disabled: true,  
    )
   ]
)

Props

Children widgets must implement ITogglable<T extends Widgets> interface and add props bool activeToggle used for styling purpose of active toggle widget

abstract class IToggleable<T extends Widget> {  
  /// This methods clone immutable widget and add the possibility to specify  
  /// active/inactive state for toggle widget when pressed
  T copyWith({bool activeToggle});  
}
Name Explanation Default
children List of widgets null
onPressed(index) Callback when a widget item is pressed null
defaultSelectedIndex Default selected/active widget index 0
spacePadding Space between widgets (right padding) 20

Download Details:

Author: Ta0uf19

Source Code: https://github.com/Ta0uf19/astroplant-mobile

#flutter #dart #mobile-apps

Astroplant Mobile Application with Flutter
18.70 GEEK