Flutter Learning

 Let's Learn how to call API/Webservices using bloc pattern of flutter What is bloc?  So as per official site of Bloc .  The goal of this package is to make it easy to implement the   BLoC   Design Pattern (Business Logic Component). This design pattern helps to separate  presentation  from  business logic . Following the BLoC pattern facilitates testability and reusability. This package abstracts reactive aspects of the pattern allowing developers to focus on writing the business logic. Bloc  A  Bloc  is a more advanced class which relies on  events  to trigger  state  changes rather than functions.  Bloc  also extends  BlocBase  which means it has a similar public API as  Cubit . However, rather than calling a  function  on a  Bloc  and directly emitting a new  state ,  Blocs  receive  events  and convert the incoming  events  into ...

What Is SQLite SQLite is an open source relational database, it is used to create a database, perform different operation like add, delete and remove data. SQLite setup Add the required dependencies. For this article, you’ll need the  sqflite package  for using the SQLite database. Open a simulator device or connect a real device to your system and start the app using the following command: flutter run Add your SQLite file which you want to read and write. Place your file under assets folder like below image Create DBQueries and DBProvider. DBProvider is require to connect your app with database. import 'dart:io' ; import 'package:flutter/services.dart' ; import 'package:path_provider/path_provider.dart' ; import 'package:sqflite/sqflite.dart' ; import 'package:path/path.dart' ; class DBProvider { static final DBProvider _instance = new DBProvider . internal (); factory DBProvider() => _instance ; static Database _database ; Future<...

How to create responsive and dynamic Listview? Step 1: Create Listview builder ListView.builder( physics: ScrollPhysics(parent: AlwaysScrollableScrollPhysics()), itemCount: allBillList[ 0 ].data!.length, scrollDirection: Axis.vertical, itemBuilder: (c, index1) { String data = mainList![index1]; return ListItem(data); }) Step 2: Create separate ListItem.dart file import 'package:flutter/cupertino.dart' ; import 'package:flutter/material.dart' ; class ListItem extends StatefulWidget { ListItem({ this .data}); final String? data; @override _ListItemState createState() => _ListItemState(); } class _ListItemState extends State<ListItem> { @override Widget build(BuildContext context) { // TODO: implement build return Column( children: [ Container(margin: const EdgeInsets.all( 16.0 ), child:Text(data)), BasicWidget.getDivider(), ], ); } } So if you want to delete or add items in main...

Search on type in listview in flutter  Declare 2 List one is new search result list and other is existing list. List searchresult = []; List<String> allBillList = List . empty (); initialte TextField for search in container and assign controller late TabController _tabController ; initialize controller inside init @override void initState() { _tabController = new TabController (length: 4 , vsync: this ); super .initState(); } Container ( child: Visibility ( visible: isSearching , child: Container ( height: 60.0 , padding: const EdgeInsets . all ( 8.0 ), child: TextField ( textAlign: TextAlign. left , controller: _controller , style: new TextStyle (), decoration: new InputDecoration ( border: OutlineInputBorder ( borderRadius: BorderRadius . circular ( 20.0 ), ), prefixIcon: new Icon (Icons. search , color: Colo...

How to create color file common for all app. Create common AppColors.dart file in your lib folder. class AppColors { static const Color btn_primary_dark_new = Color ( 0xff214960 ); static const Color btn_primary_light_new = Color ( 0xff56C67D ); static const Color gray = Color ( 0xffD7D7D7 ); static const Color bg_web_link_item_disabled = Color ( 0xffddddd ); } and use it wherever you need. using AppColors.colorName Container ( margin: const EdgeInsets . all ( 8.0 ), decoration: ShapeDecoration ( color: AppColors.btn_primary_dark_new, shape: RoundedRectangleBorder ( borderRadius: BorderRadius . circular ( 8.0 ), side: BorderSide (width: 1 , color: AppColors.gray))), child: Text ("Hello"), )

Create centralized AppBar for all screens at one place. In just 2 steps you create your own appBar. 1) Create AppBar.dart here you have to pass true and false to showRight and inside rightWidget pass widget from parent screen.(check step 2) class  AppBarWidget { static getAppBar (String title, [showRight, rightWidget]) { if (showRight == null ) { showRight = false ; } return AppBar ( // Here we take the value from the MyHomePage object that was created by // the App.build method, and use it to set our appbar title. backgroundColor: Colors. white , title: Text ( title, style: TextStyle (color: AppColors. btn_primary_dark_new ,fontWeight: FontWeight. w600 ), ), centerTitle: true , leadingWidth: 100 , leading: Padding ( padding: const EdgeInsetsDirectional . only (start: 8.0 ), child: InkWell ( onTap: () { Get.back(); }, child: Row ( ...