7. Flutter Tutorial for Beginners – How to Use Flutter Packages

0
788

There are various types of Flutter Packages. Packages are published to http://www.pub.dev

You can also browse the packages on http://www.pub.dev by filtering on Android plugins, iOS plugins, web plugins, or any combination thereof.

For example, we want to get current device information from within the Flutter application. Then what we’ll do?

Step 1. Go to http://www.pub.dev/

Step 2. Search for “device information” into Flutter

Step 3. Then choose one of them.

Step 4. Read the details of this package. If it is perfect for your project, then click “Installing” tab to know how we can use it to our project. Then follow the instructions.

First, for this package, open your flutter project on android studio.

Second, open pubspec.yaml file.

Third, copy the dependencies “device_info: ^0.4.2+1” under the “dependencies:” section. Make sure it starts with two spaces.

Fourth, click “Packages get” or “Packages upgrade”

Make sure that your internet connection is alive.

After successfully done you get the exit code in 0.

Then the last step of installing, which is importing the package into dart file.

For that, I open the main.dart file. And Paste the import code at top of the file.

Then apply the code in flutter project as like as they described into “Readme” or “Example” tab in http://www.pub.dev.

import 'package:flutter/material.dart';
import 'package:device_info/device_info.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  String model = "";

  Future getDevideInfo() async
  {
    DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
    AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
    setState(() {
      model = androidInfo.model;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Model of this device:',
            ),
            Text(
              model,
              style: Theme.of(context).textTheme.display1,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: getDevideInfo,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

LEAVE A REPLY

Please enter your comment!
Please enter your name here