Connecting to the filter with the supplier:
In the flater application the user interface represents the current state of the application, so that when there is any change / update, the user interface will be rebuilt from scratch.
When there is an update to the user interface, every widget on the screen, i.e. widgets of text, buttons and everything else is updated. Using situation management will reduce the complexity of the code and reduce the size of the code.
Situation management provides the ability to handle data while refreshing the page, components to be aware of the state of things these provide a great impact on app performance.
We will deal with the concept of state management in Flutter programming and consider the connection of Flutter with a vendor template and the implementation of a connection mechanism in this guide.
The supplier pattern discussed in our previous guides can also visit them Here.
pubspec.yaml:
Add vendor, get dependent on pubspec.yaml to start connecting to the vendor. Also try to specify the latest version numbers available to avoid any conflict.
dependencies: flutter: sdk: flutter provider: get:
user:
We will create an extension model and notify change and specify the email fields, password. So we can add the user credentials and bring them anywhere in the app after connecting with a vendor.
Create a data storage method and can also create a data retrieval method.
import 'package:flutter/material.dart'; class User extends ChangeNotifier{ String email = ""; String pwd = ""; void signIn(String emailTxt, String pwdTxt){ email = emailTxt; pwd = pwdTxt; notifyListeners(); } }
Dashboard:
Create a dashboard screen that will load as soon as the usage connects. And here we present information about the user based on the supplier pattern.
import 'package:flutter/material.dart'; import 'package:flutter_login_provider/user.dart'; import 'package:provider/provider.dart'; class Dashboard extends StatelessWidget { const Dashboard({Key? key}) : super(key: key); @override Widget build(BuildContext context) { return Consumer<User>(builder: (context,user,_){ return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text("Dashboard"),), body: Center(child: Text(user.email,style: const TextStyle(color: Colors.blueAccent,fontSize: 30.0),)), ), ); } ); } }
main.dart:
Specify the vendors within the blank main block of code as detailed below.
void main() { runApp(MultiProvider( providers: [ChangeNotifierProvider(create: (_) => User())], child: MyApp(), )); }
Specify the text fields and add controllers to retrieve the information from these fields.
var txtUserNameController = TextEditingController(); var txtUserPwdController = TextEditingController();
TextField( controller: txtUserNameController, decoration: const InputDecoration(hintText: "Enter username"), ), TextField( controller: txtUserPwdController, decoration: const InputDecoration(hintText: "Enter password"), ),
Add a text button to tap the login button to connect
TextButton( onPressed: () { }, child: const Text("Login"))
Specify the vendor with which we are trying to store the information within the onPressed
Provider.of<User>(context, listen: false).signIn( txtUserNameController.text.toString(), txtUserPwdController.text.toString());
with the help of GetX We will try to move a library to another screen.
Get.to(() => Dashboard());
Full code:
Providing full code for Flutter input with vendor implementation.
import 'package:flutter/material.dart'; import 'package:flutter_login_provider/dashboard.dart'; import 'package:flutter_login_provider/user.dart'; import 'package:get/get.dart'; import 'package:provider/provider.dart'; void main() { runApp(MultiProvider( providers: [ChangeNotifierProvider(create: (_) => User())], child: MyApp(), )); } class MyApp extends StatelessWidget { MyApp({Key? key}) : super(key: key); var txtUserNameController = TextEditingController(); var txtUserPwdController = TextEditingController(); @override Widget build(BuildContext context) { return GetMaterialApp( home: Scaffold( appBar: AppBar( title: const Text("Provider Login"), ), body: Padding( padding: const EdgeInsets.all(20.0), child: Center( child: Column( children: [ TextField( controller: txtUserNameController, decoration: const InputDecoration(hintText: "Enter username"), ), TextField( controller: txtUserPwdController, decoration: const InputDecoration(hintText: "Enter password"), ), TextButton( onPressed: () { Provider.of<User>(context, listen: false).signIn( txtUserNameController.text.toString(), txtUserPwdController.text.toString()); Get.to(() => Dashboard()); }, child: const Text("Login")) ], ), ), ), ), ); } }
If you have any questions in this guide about connecting Flutter with a vendor, tell us about it in the comments section below. If you like this guide do like and share us for more interesting updates.