Flutter Tips

Hey Coders 🤓 ,

Welcome to flutter tips,

Here I m going to add Flutter snippets which are useful,

although yes we can google and all but instead I want it all at one place,

So easy to copy and use ,

Basically I was making this for me only ,later I thought it can be useful to every coder,

So as I'm Going to learn as well as I'm Going to update this page.

So Enjoy Flutter Guys !!

FAB at center

class ContaPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) => new Scaffold(
    // ...

    floatingActionButton: new FloatingActionButton(
      // ...FloatingActionButton properties...
    ),

    // Here's the new attribute:

    floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
  );
}

FAB background Color

   floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Add your onPressed code here!
        },
        child: Container(
          width: 60,
          height: 60,
          child: Icon(
            Icons.add,
          ),
          decoration: new BoxDecoration(
            shape: BoxShape.circle,
            gradient: new RadialGradient(
              colors: [Colors.orange, Color(0xFFF500).withOpacity(0.5)],
                //opacity for transparent
            ),
          ),
        ),
      ),

Decoration common code:

         //Applied in container

         decoration: new BoxDecoration(
            shape: BoxShape.circle,
             //this is radialgradient
            gradient: new RadialGradient(
              colors: [Colors.orange, Color(0xFFF500).withOpacity(0.5)],
                //opacity for transparent
            ),
          ),

Decoration Gradient Color

Reference for extra:Gradient

      body: Container(
        decoration: BoxDecoration(
          gradient: LinearGradient(
              //provide begin and end
              begin: Alignment(6.123234262925839e-17, 1),
              end: Alignment(-1, 6.123234262925839e-17),
              //Optional u can use this too
                begin: Alignment.topLeft,//well it is preferred method
                  end: Alignment.bottomRight,
                  stops: [0.3, 1],//it manages how much color to extend

              colors: [
                  //Provide Colors here
                Color.fromRGBO(69, 182, 73, 1),
                Color.fromRGBO(46, 196, 182, 1)
              ]),
        ),

      onPressed: () {
          //Starts here 
          showModalBottomSheet<void>(
            context: context,
            builder: (BuildContext context) {
              return Container(
                height: 200,
                color: Colors.amber,
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                        //can add childrens here
                      const Text('Modal BottomSheet'),
                    ],
                  ),
                ),
              );
            },
          );
        },

Border Radius

decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      //many methods are there like
                      //borderRadius.all(),..etc..
                      topLeft: Radius.circular(25),
                      topRight: Radius.circular(25)),

)

In Bottom Sheet if we apply radius it may show white color at background

So 2 Solutions :

1.Override

 showModalBottomSheet<void>(
            backgroundColor: Colors.transparent,
            ......
            .
            //Bottom Sheet code

2.Set Theme

MaterialApp(
    theme: ThemeData(
      // Draw all modals with a white background and top rounded corners
      bottomSheetTheme: BottomSheetThemeData(
        backgroundColor: Colors.white,
          //change background color here or try transparent
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.vertical(top: Radius.circular(10))
        )
      )
    ),

Use Google Font

//import
import 'package:google_fonts/google_fonts.dart';


//This is override method which I like
 Text('What made you Happy today?',
     style:
    GoogleFonts.alice(color: Colors.white, fontSize: 18),
   //Change alice with preffered font
     ),

Add Space Box (Empty Space)

SizedBox(height: 80)
//You can use it with childrens or two buttons and many..

Simple Text Field In Container

Define Text Editing Controller first

  TextEditingController nameController = TextEditingController();

Text Field

   Container(
   margin: EdgeInsets.all(40),
                    child: TextField(
                        controller: nameController,
                        decoration: InputDecoration(
                            hintText: 'I realize my worth..today',
                            hintStyle: GoogleFonts.alice(color: Colors.white)),
                        onChanged: (text) {
                          setState(() {
                            // fullName = text;
                            //you can access nameController in its scope to get
                            // the value of text entered as shown below
                            //fullName = nameController.text;
                          });
                        }),
                  ),

  onPressed: () {
        Navigator.push(
          context,
           MaterialPageRoute(
           builder: (context) => FeelingScreen()),//pass target widget
            );
    },

Gesture Detector which can be applied to any component

So we can make any Component clickable Unlike OnPressed() its is available to

some components only,So Just Wrap any component By Gesture Detector to use it.

  GestureDetector(
          child: Image.asset("assets/images/funnyemo.png"),//my widget
                        onTap: () {//Gesture detector method
                          Navigator.push(
                            context,
                            MaterialPageRoute(builder: (context) => Jardone()),
                  );
        }),

Center Column or Row Content

Column:

mainAxisAlignment: MainAxisAlignment.center //Center Column contents vertically,
crossAxisAlignment: CrossAxisAlignment.center //Center Column contents horizontally,

Row:

mainAxisAlignment: MainAxisAlignment.center //Center Row contents horizontally,
crossAxisAlignment: CrossAxisAlignment.center //Center Row contents vertically,

Add Image

Add Image from asset:

  Image.asset(
      "assets/images/jar.png",
       width: 200,//optional pass if large or small image 
       height: 400,//or want to fit in the image 
   )

Size :By height and width

For more reference:images size

    //Image will be render in a 100 x 100 box.
  Image.asset(
    'assets/images/file-name.jpg',
    height: 100,
    width: 100,
 )

Adjust Image Size by Scale

 //The image will look bigger if the scale is less than 1.
 Image.asset(
    'assets/images/file-name.jpg',
    scale: 0.8
 )

Fit Image Size

//In this example, the image size will be fitted to its width.
Image.asset(
    'assets/images/file-name.jpg',
    height: 100,
    width: 200,
    fit: BoxFit.fitWidth,
 )

Blend Image with a Color

// Define a color that will be blended to the image's pixels.
Image.asset(
    'assets/images/file-name.jpg',
    height: 100,
    width: 100,
    color: Colors.red,
    colorBlendMode: BlendMode.darken,
    fit: BoxFit.fitWidth,
 )

Flutter Awesome Snippets

Comments

Flutter

More from this blog

Persistent "Android Resource Linking Failed" (Ghost Files) : Solution

Jetpack Compose Bottom Navigation + Nested Navigation Solved

Compose MVVM RoomDB with Flow and DI

Ultimate Guide to Jetpack Compose Navigation

Installing LangChain: How to install LangChain and get started with it

Flutter Tips

FAB at center

FAB background Color

Decoration common code:

Decoration Gradient Color

Border Radius

In Bottom Sheet if we apply radius it may show white color at background

So 2 Solutions :

1.Override

2.Set Theme

Use Google Font

Add Space Box (Empty Space)

Simple Text Field In Container

Define Text Editing Controller first

Text Field

Open OnPressed() new Activity or widget you can say

Gesture Detector which can be applied to any component

So we can make any Component clickable Unlike OnPressed() its is available to

some components only,So Just Wrap any component By Gesture Detector to use it.

Center Column or Row Content

Column:

Row:

Add Image

Add Image from asset:

Size :By height and width

For more reference:images size

Adjust Image Size by Scale

Fit Image Size

Blend Image with a Color

Command Palette

Comments

Flutter

More from this blog

Flutter Tips

FAB at center

FAB background Color

Decoration common code:

Decoration Gradient Color

Show ModalBottomSheet halfScreen Popup:

Border Radius

Important Modal Bottom Sheet points:

In Bottom Sheet if we apply radius it may show white color at background

So 2 Solutions :

1.Override

2.Set Theme

Use Google Font

Add Space Box (Empty Space)

Simple Text Field In Container

Define Text Editing Controller first

Text Field

Open OnPressed() new Activity or widget you can say

Gesture Detector which can be applied to any component

So we can make any Component clickable Unlike OnPressed() its is available to

some components only,So Just Wrap any component By Gesture Detector to use it.

Center Column or Row Content

Column:

Row:

Add Image

Add Image from asset:

Size :By height and width

For more reference:images size

Adjust Image Size by Scale

Fit Image Size

Blend Image with a Color