Flutter With Praveen

  Terms & Conditions Effective Date:   December 14, 2022 Welcome to TutBot (“we,” “us,” or “our”). By using our app, TutBot - Online Courses, you agree to comply with and be bound by the following Terms and Conditions. Please read them carefully. 1. Use of the App You agree to use the app only for lawful purposes and in a way that does not infringe the rights of others or restrict or inhibit their use and enjoyment of the app. 2. User Registration You may need to create an account to access some features. You are responsible for maintaining the confidentiality of your account and password. 3. Intellectual Property All content provided on the app, including courses, text, graphics, logos, and software, is owned by TutBot or its licensors and is protected by copyright laws. 4. Payments and Refunds If you purchase courses or services through the app, you agree to pay the applicable fees. Refund policies, if any, will be clearly stated on the purchase page. 5. User ...

import 'package:flutter/material.dart' ; void main () { runApp( const MyApp ()); } class MyApp extends StatelessWidget { const MyApp({ super .key}); @override Widget build (BuildContext context) { return MaterialApp ( debugShowCheckedModeBanner: false , title: 'Flutter with Praveen' , theme: ThemeData ( primarySwatch: Colors. blue , ), home: TabScreen (), ); } } class TabScreen extends StatelessWidget { @override Widget build (BuildContext context) { return Scaffold ( body: Padding ( padding: const EdgeInsets . all ( 16.0 ), child: DefaultTabController ( length: 2 , // 2 Tabs (Login & Register) child: Column ( children: [ // 📌 1. Heading Text Text ( "Flutter with Praveen" , style: TextStyle ( fontSize: 24 , fontWeight: FontWeight. bold , ...

 # Flutter TabBar: A Simple Guide to Creating Tab Navigation Tab navigation is an essential part of modern mobile applications, allowing users to switch between different sections of an app easily. Flutter provides a powerful widget called **TabBar** that enables smooth tab-based navigation. In this guide, we'll explore how to implement **TabBar** in Flutter step by step. --- ## What is TabBar in Flutter? The **TabBar** widget in Flutter allows users to navigate between different views by tapping on tabs. It is commonly used in combination with **TabBarView** and **DefaultTabController**. ### Components of Tab Navigation in Flutter: 1. **TabBar** – Displays the tab headers. 2. **TabBarView** – Shows the content associated with each tab. 3. **DefaultTabController** – Manages the state of the tabs. --- ## Implementing TabBar in Flutter Let's go through a basic implementation of **TabBar** step by step. ### Step 1: Create a New Flutter Project Ensure you have Flutter installed and...

Bottom Navigation Bar in Flutter Welcome back to another installment of “A Developer’s Journey with Hemant.” 📚✨ Today, we’re diving into a crucial aspect of mobile app development: the bottom navigation bar . 📱 In this tutorial, we’ll set up a bottom navigation bar in our MainHomeScreen , featuring five essential screens: Home 🏠, Calendar 📅, Add Habit ➕, Profile 👤, and Settings ⚙️. This setup not only enhances user experience but also ensures smooth and intuitive navigation throughout your app. What is a Bottom Navigation Bar? A bottom navigation bar is a common UI component that allows users to quickly switch between different sections of an app. It is usually placed at the bottom of the screen and contains multiple tabs, each represented by an icon and a label. Creating a Basic Bottom Navigation Bar Let's implement a bottom navigation bar in Flutter using the BottomNavigationBar widget. import 'package:flutter/material.dart' ; void main () { runApp( MyApp ...

import 'package:flutter/material.dart' ; void main () { runApp( const MyApp ()); } class MyApp extends StatelessWidget { const MyApp({ super .key}); @override Widget build (BuildContext context) { return MaterialApp ( debugShowCheckedModeBanner: false , title: 'Flutter Tabs Example' , theme: ThemeData (primarySwatch: Colors. blue ), home: const HomeScreen (), ); } } class HomeScreen extends StatelessWidget { const HomeScreen({ super .key}); @override Widget build (BuildContext context) { return DefaultTabController ( length: 3 , // 🔥 Kitne tabs chahiye child: Scaffold ( appBar: AppBar ( title: const Text ( "Flutter Tabs Example" ), bottom: const TabBar ( tabs: [ Tab (icon: Icon (Icons. home ), text: "Home" ), Tab (icon: Icon (Icons. star ), text: "Favorites" ), Tab (icon: Icon (Icons. settings )...

 Flutter Selection Controls: Radio Button, Switch, and Checkbox Explained Flutter provides various selection controls that allow users to make choices in an app. These include Radio Buttons , Switches , and Checkboxes , each serving a unique purpose. Understanding when and how to use these controls can enhance your app’s user experience. import 'package:flutter/material.dart' ; void main () { runApp( const MyApp ()); } class MyApp extends StatelessWidget { const MyApp({ super .key}); @override Widget build (BuildContext context) { return MaterialApp ( debugShowCheckedModeBanner: false , theme: ThemeData ( useMaterial3: true , // Enable Material 3 features colorSchemeSeed: Colors. blue , ), home: const SelectionControlsScreen (), ); } } class SelectionControlsScreen extends StatefulWidget { const SelectionControlsScreen({ super .key}); @override _SelectionControlsScreenState createState () => _SelectionControlsSc...

  What is a Button in Flutter? Buttons are fundamental UI components in Flutter that enable users to perform actions with a single tap. As part of the  Material Design library , Flutter provides a variety of button widgets that can be customized to fit different design needs. Whether you want a  simple text button, an outlined button, or an elevated button , Flutter makes it easy to integrate buttons into your app for seamless user interactions. 📊  Why Are Buttons Important in UI Design? ✅  TextButton ✅  ElevatedButton  (Styled bhi) ✅  OutlinedButton ✅  FloatingActionButton ✅  DropdownButton ✅  IconButton ✅  InkWell Button ✅  PopupMenuButton ✅  GestureDetector Button ✅  CupertinoButton  (iOS Style) ✅  ToggleButtons ✅  ElevatedButton with Icon import 'package:flutter/cupertino.dart' ; import 'package:flutter/material.dart' ; void main () { runApp( const MyApp ()); } class MyApp extends StatelessW...

 A Drawer is a side menu that slides in from the left and provides quick navigation within the app. It is commonly used when there are multiple sections in an app, but space is limited for a bottom navigation bar or tabs. In this blog, we’ll learn how to implement a Drawer in Flutter and customize it to match your app’s design . Let's Jump into the Code! 🚀 Step 1: Setting Up the Basic Drawer import 'package:flutter/material.dart' ; // Function to trigger app build void main () => runApp( const MyApp ()); class MyApp extends StatelessWidget { final appTitle = 'Flutter Drawer Demo' ; const MyApp({Key? key}) : super (key: key); @override Widget build (BuildContext context) { return MaterialApp ( title: appTitle , home: MyHomePage (title: appTitle ), ); // MaterialApp } } class MyHomePage extends StatelessWidget { final String title ; const MyHomePage({Key? key, required this . title }) : super (key: key); @override Widget b...

  Mastering Layout Widgets in Flutter: Expanded, Flexible, Spacer & More Expanded Widget – Fills the Available Space The   Expanded   widget   allows a child widget to take up all available space within a   Row, Column, or Flex . return Scaffold ( appBar: AppBar (title: Text ( "Expanded in Column" )), body: Column ( children: [ Expanded ( child: Container ( color: Colors. red ), ), Expanded (child: Container (color: Colors. green )), Expanded(child: Container (color: Colors. blue )), ], ), ); 👉   Both containers will take equal space inside the Row, no matter the screen size. 🛠 When to Use? ✅ When you want widgets to take equal space. ✅ When you need a responsive layout that adjusts automatically. Flexible Widget – Fills Space but Can Shrink The difference between   Expanded   and   Flexible   is: Expanded   always takes up all available space. Flexible   tries to ...