Flutter With Praveen

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...