Code With Jam

TextField works on 2 functionalities in flutter, First is without Focus and other is on Focus. We will handle TextField layout on both of these events. We will change TextField underline default color and also change color on focus. TextField has a propery  enabledBorder to show border on default state and  focusedBorder which update border UI when user select TextField. Flutter Change TextField Underline Color on Focus 1. Creating  TextField widget and defining  focusedBorder and  enabledBorder properties. TextField( autocorrect: true, decoration: InputDecoration( hintText: 'Enter Text', enabledBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.pink), ), focusedBorder: UnderlineInputBorder( borderSide: BorderSide(color: Colors.teal), ), )) Screenshot without Focus: Screenshot with Focus: Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App...

The default TextField comes with a underline or we can say a bottom border. The main purpose of showing underline on TextField is to show where the TextField are on screen. We will remove TextField underline with defining border property none. Flutter Remove TextField Underline 1. Create a  TextField and define border as none using  InputBorder.none property. TextField( autocorrect: true, decoration: InputDecoration( border: InputBorder.none, hintText: 'Type Name Here...')) Screenshot: Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return const MaterialApp( home: Scaffold( body: Center( child: SizedBox( width: 280, child: TextField( autocorrect: true, ...

Passwords are basic requirement for everyone. We do not share our password with anyone because they are confidential. In flutter we can set TextField Input Type Password easily with obscureText property. obscureText disables copy paste of password in TextField which is quite good for securing our password. Flutter TextField Input Type Password 1. Creating  TextField widget and define obscureText with True value. We are also defining  autofocus and enableSuggestion with false value to disable auto focus turn off. TextField( decoration: InputDecoration( border: OutlineInputBorder(), hintText: 'Type Password...', ), autofocus: false, obscureText: true, enableSuggestions: false, ) Screenshot: Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return const Materia...

Floating label TextField is different than normal TextInput in flutter. In Floating label TextField both Label and Hint animates. In default condition label display inside TextField and when user focus on TextField than label moves to top side of TextField with animation and hint start showing until user types. Live Screenshot: Flutter Floating Label TextField - Animate Hint & Label 1. Creating  TextField with floating label. TextField( controller: textInputName, autocorrect: true, decoration: const InputDecoration( border: OutlineInputBorder(), labelText: 'Enter Name Here', hintText: 'Type Here...', ), autofocus: false, ) Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const MyApp()); class MyApp extends StatelessWidget { const MyApp({super.key}); @override Widget build(BuildContext c...

To get input feedback from user we will use  TextField widget in flutter. TextField widget is same as TextInput. We have seen TextField on almost every mobile and web application. Flutter TextField Retrieve Entered Value 1. Defining a  TextEditingController . It is used to hold entered value of TextField. final textInputName = TextEditingController(); 2. Define a Empty string. We will use this string to show entered text in Text widget . String output = ''; 3. Defining a function, In this function we will store  textInputName entered value into string. getInput() { setState(() { output = textInputName.text; }); } 4. Creating 1 Text , 1 TextField and 1 Button widget. First text display the entered text. Column(children: <Widget> [ Text("Typed Text is = $output", style: const TextStyle(fontSize: 24)), Container( margin: const EdgeInsets.all(22), child: TextField( controller: textI...

Flutter supports dynamically UI updating feature using State. We will update text style using Boolean state variable in this tutorial. What we are going to do is we will declare a Boolean variable initialize with True value. Now on the Button click we will call a function and change Boolean variable value to False. On this event we are calling Style on Text using Ternary operator. So when it's value is True it will execute first part and if the Boolean value is False it will execute the second part. Eventually this will lead us to updating style sheet on app run dynamically. Flutter Change Text Style Programmatically on Button Click: 1. Defining a Boolean variable with initial True value. bool styleControl = true; 2. Defining 2 Text style sheet . static const TextStyle style1 = TextStyle( color: Colors.brown, fontSize: 24, ); static const TextStyle style2 = TextStyle(color: Colors.black, fontSize: 35, fontWeight: FontWeight.bold); 3. Defining a function. In th...

Position Absolute is a unique way to put a Widget or Container above any Root or Child widget at a fixed position given from left right top and bottom. In position absolute it sticks the given View with given margin from all sides above any view. Basically we fix position of Container on screen. In flutter we can to achieve absolute functionality we will use  Positioned widget along with Stack widget as Parent. Flutter Set Widget Position Absolute - Right Way 1. Defining Stack Widget in the body section of app. Stack(children: [ ]) 2. Creating multiple Column Widget inside Stack widget as its children. Stack(children: [ Column(children: [ Container( width: double.infinity, height: 200, color: Colors.brown, ), Container( width: double.infinity, height: 200, color: Colors.blueGrey, ), ]), ]) 3. Now after closing the Column widget we would define Positioned widget with Top...

The Container widget has a property  padding to apply padding on Container child. It support various type of padding formats using  EdgeInsets function. But the most common is  EdgeInsets.fromLTRB(left, top, right, bottom). Here LTRB means Left, Top, Right and Bottom . Flutter Add Padding on Text Inside Container: 1. Defining Container widget with padding property. Padding function syntax: EdgeInsets.fromLTRB(left, top, right, bottom) Container( padding: const EdgeInsets.fromLTRB(20, 20, 20, 20), width: double.infinity, height: 200, color: Colors.brown, child: const Text( 'Padding on Text in Container', style: TextStyle(fontSize: 28, color: Colors.white), textAlign: TextAlign.center, ), ) Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); @override Widget buil...

When we create Container in flutter than we have to define it's width and height and according to that it will expand on screen. What if we want to make a Container covers whole device screen and works as our Root View. Then we will use Expanded widget in Column widget. Expanded widgets expands itself in the available space in the parent widget main axis. For example if we are defining Expanded in Column then it will expand in Vertical direction in the remaining screen. If we are defining Expanded in Row then it will expand itself in horizontal direction. We can also define Flex. Flutter Set Container Width Height Full Screen Flex: 1. Defining  Expanded widget with Child Container . We are defining width as full screen of container because Flex Expanded does not expand horizontally in Column widget . Column(children: [ Expanded( flex: 1, child: Container( width: double.infinity, color: Colors.cyan, ...

Hello friends, Today when I was creating a flutter tutorial with Expanded widget then by mistake I defined Expanded directly inside Body section of app. Then I have defined a Container widget as child of Expanded. My goal is to achieve 50% of device height and width using Flex. But I encountered a error and my app crashed. The error is " Another exception was thrown: Incorrect use of ParentDataWidget ". Screenshot of Error in app: Screenshot of Error in Terminal: Flutter Fix Incorrect use of ParentDataWidget Expanded Error 1. To Fix this error we have to wrap Expanded widget inside Column or Row widget . Column(children: [ Expanded( flex: 1, child: Container( width: double.infinity, color: Colors.green, alignment: AlignmentDirectional.center, child: Text('hello'), )), Expanded( flex: 1, child: Container( width: double.infinity, color: C...

Container widget always works with Width and height factor. If we do not define its width it automatically occupy its parent width and height by default. But this is not the right approach. To define width matched to its parent we have to define width value as  double.infinity . Flutter Create Full Width Container 1. Define width value  double.infinity to make the container full width respect of root widget. Container( width: double.infinity, height: 300, color: Colors.teal, alignment: Alignment.center, child: const Text( 'Container with Full Width', style: TextStyle(fontSize: 28, color: Colors.white), ), ), Screenshot: Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( ...

Recently when I am putting Container inside container widget than even I am giving child container width height fixed and smaller then the parent. But child container is expanding itself over the parent. This is not its actual behavior. So after looking int container widget documentation I found that we have pass Child container alignment, In order to do not expand child over parent container. Flutter Add Container Inside Container 1. We have to use  alignment property of Container, So the child container will not expand itself . Container( width: 300, height: 250, color: Colors.blue, alignment: Alignment.center, child: Container( width: 50, height: 50, color: Colors.deepOrange, ), ), Screenshot: Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); @override Widget build...

Recently when I was coding in flutter and put three Container child inside Column widget with max height then device height. I have seen a error " BOTTOM OVERFLOWED BY PIXLES " at footer side of screen. After reading this error I have read few flutter documentation and understand that this error comes because I am defining 3 Container each with 300 of height Total of 900 in height. Which is grater than my device height. This is why it is throwing overflowed error . Error Screenshot: How to solve Flutter Bottom overflowed by pixels Error 1. It is quite easy to solve this error all we have to do is put our main Column widget inside  SingleChildScrollView . SingleChildScrollView will enable vertical scrolling in Child and overflowed error will be gone from your screen. SingleChildScrollView( child: Column( children: [ Container( width: 300, height: 200, color: Colors.green, ), Container( ...

Blur effect is when image shows with blurred effect where all the object present of image with border mixing with each other. In flutter to achieve right amount of blur effect on image we will use  BackdropFilter widget. Flutter Blur Image - Gaussian Blur Effect 1. Open your project's main.dart file and import  material.dart and dart:ui classes. import 'package:flutter/material.dart'; import 'dart:ui'; 2. Defining a variable and pass image URL for network image. final String imageURL = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqulsBzAJFu9AOO1BOdDW26gGWmVpnTgInl_H9YEtDxCnuHva7o3Z6EGqTjoSJxFgVkpo1fYbPR6h-B4X5kkwc7lJyymDQGoRX3RdSfxIezLhLt9pVuNGusnG-CI9DAldqAoGLZw44ybQL5tw6cw-6oW3ULCVr4lu-wMMTxe_RU4VfWaZtD5dT2d00xyDf/s1280/rose.jpg'; 3. Creating Container widget with fixed width and height. We are a pplying background image using  DecorationImage . Container( width: 300, height: 250, decoration: BoxDecoration( image: Decorati...

The Image widget in flutter support alignment in 9 different positions respect of its root container. There are a alignment property of Both local and network image where we will pass Alignment. Alignment are use to align a object in parent area. Flutter Image Alignment Respect of Root Container 1. Defining our online image URL in as String. final String imageURL = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiau15n6tb3GDLqq0HgfxYj-5JS4LSJ0svNQTj7MOF3UKnlGkJLD2wRTWz-0K2qR7vwCVQ5PA4lvlwIvku-VgM1RZn97Bzbl5XpoLXfnJ7GtPahMR9OIQr1QafZb5Kv3TkgCDj0sYcYfx3RRPA43ythqWi85CNDeVJAdvvqgY0d2w6OkbfnAFkDIC051_c4/s16000/heart-icon.png'; 2. To set image alignment at top left side we will use  Alignment.topLeft property on Image. Container( width: 300, height: 300, decoration: BoxDecoration( border: Border.all(color: Colors.black, width: 2), ), child: Image.network( imageURL, width: 100, height: 100, fit: BoxFit.none, alignment: Alignment.topLeft, )) ...

To set opacity on image in flutter we have a property  opacity . It supports  Animation<double> type value between Zero and One . 0.1 reflects lowest opacity value and 1.0 reflects highest opacity value. Flutter Set Image Opacity on Network Image: 1. Creating Image widget with Opacity property. We are defining  AlwaysStoppedAnimation<double> to apply transparency on image. Image.network( imageURL, width: 250, height: 200, fit: BoxFit.contain, opacity: const AlwaysStoppedAnimation <double>(0.4), ), Screenshot: Flutter Set Opacity on local Image: Image.asset( localImagePath, fit: BoxFit.fitWidth, opacity: const AlwaysStoppedAnimation <double > (0.4), ) Source code for main.dart file: import 'package:flutter/material.dart'; void main() => runApp(const App()); class App extends StatelessWidget { const App({super.key}); final String imageURL = 'https://blogger...

Image widget in flutter has a property  repeat . Repeat support 4 different types of repeat patterns in flutter. When we want to repeat a image in flutter it depends on 2 factors. First is we have to set it's resize mode as none. and pass the repeat value. Flutter Repeat Image Example 1. Uploading a small 100*100 size image and then we are using this image in our test app. 2. Creating a string URL in our project and pass uploaded image URL, final String imageURL = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiE9dt8mGeUOG5I6zrHkW4usrQ4PE-cwTd7t_jKlqR8v2KiMJ5aLIPZBfGfYYZz6e_I9HMqGWUcWgjFzj13QKSEVq9ebWG_x0pGMgXKRGbE2t1BFCrQ9FXmPJnnvp8a0zdQwgsbfiNkNdZJB53IVYotqM8kH7DAxcvgLYZUhYW5CNCAxfzoVeYXmJkPCd6a/s100/heart-icon.png'; 3. Defining a Root container with 300*300 width height . Then we are defining Image widget with  ImageRepeat.repeat . Container( width: 300, height: 300, decoration: BoxDecoration( border: Border.all(color: Colors...