Open In App

Flutter – Material Package

Improve
Improve
Like Article
Like
Save
Share
Report

Material Package contains the application icon and a lot of designing tool methods. In this package we don’t need to write the whole code for the particular function or method, we just import this package and use it single line.

How to Install The Material Package

For installing the packages we have to follow a few steps:

Step 1: Search About The Package

Suppose we want to use the package then we simply go to google and search for this function that which package is required and you get the name of the package. Now you go to flutter official website pub.dev and search for the material and you get the material packages.

Step 2: Install Material Package

Now you just go to the install section and use the package library in your code and for using the that we have two methods to use the library:

Method 1: You get the line in the installing section you just copy the line and paste it on your command and run it with flutter,

 $ flutter pub add material

Method 2: Copy the given below dependencies and paste them in your code pubsec.yaml section under the Cupertino dependencies  and tap on the pub.get section and import the material.dart in your home:

dependencies:
 material: ^1.0.0+2

Import this line in your home section:

import ‘package:material/material.dart’;

Example: Card App Using Flutter

Dart




import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MyApp(),
  );
}
class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
 
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.blue,
        body: SafeArea(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children:<Widget> [
              CircleAvatar(
                radius:50,
              ),
              Text(
                'Priyanshu',
                style: TextStyle(
                  fontWeight: FontWeight.bold,
                  fontSize: 40.0,
                  fontFamily: 'Pacifico',
                  color: Colors.white,
                ),
              ),
              Text(
                'Flutter Developer',
                style: TextStyle(
                  fontSize: 20.0,
                  fontFamily: 'Source Sans Pro',
                  color: Colors.black,
                  fontWeight: FontWeight.bold,
                ),
              ),
              Card(
 
                margin: EdgeInsets.all(20.0),
                color: Colors.white,
                child: ListTile(
                    leading:
                    Icon(
                      Icons.phone,
                      color: Colors.black,
                      size: 20.0,
                    ),
                    title:
                    Text(
                      '+91 7355689902',
                      style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 20.0,
                        color: Colors.black54,
                      ),
                    )
 
                ),
              ),
              Card(
 
                margin: EdgeInsets.all(20.0),
                color: Colors.white,
                child: ListTile(
                  leading:
                    Icon(
                      Icons.email,
                      color: Colors.black,
                      size: 20.0,
                    ),
                    title:
                    Text(
                      'priyanshutaru@gmial.com',
                      style: TextStyle(
                        fontFamily: 'Pacifico',
                        fontSize: 20.0,
                        color: Colors.black54,
                      ),
                    )
                   
                ),
              )
            ],
          )
        ),
      ),
    );
  }
}


Use the network image in the circle Avatar.

Output: 

Output

Note: Always use the latest and most stable version of the packages.



Last Updated : 15 Feb, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads