Skip to content
This repository has been archived by the owner on Apr 23, 2020. It is now read-only.

amitkhairnar44/twrp_builder_flutter

Repository files navigation

TWRP Builder

This repo is outdated and is not maintained anymore. This repo contains old codes and was developed in the process of learning Flutter. Right now the maintained repository is private and will be made available for public in future.

A flutter version of TWRP Builder app.

This app depends upon flutter plugin twrpbuilder_plugin pub package

Note: This app is not for iOS, so don't try to build it for iOS devices.

Implemented

  • Google login
  • Root access request
  • User profile data in Navigation header
  • Team details page
  • Contact details page
  • Logout and Quit
  • Contributors page
  • Settings page - Check for update pending 😬
  • Reject page to show rejected requests

TODO

  • Implement Backup page to backup stock recovery
  • Implement Incomplete page - running and in queue
  • Implement Complete page to show completed builds

Let's understand Flutter

Topics

  • Stateless and Stateful widgets
  • Navigation
  • Icon fonts
  • Buttons
  • Fonts

More topics will be added soon

Stateless and Stateful widgets

Everything in Flutter is a widget

Stateless widget

A stateless widget has no internal state to manage - never going to change it's state in future.

Example code

The code below shows a stateless widget that has static content and will never change in future.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Demo'),
        ),
        body: Center(
          child: Text('Hello!'),
        ),
      ),
    );
  }
}
Stateful widget

A stateful widget is dynamic. The user can interact with a stateful widget (by typing into a form, or moving a slider, for example), or it changes over time (perhaps a data feed causes the UI to update).

Example code: Check login_page.dart here

Navigation

In Android we used to launch another activity using Intent but in Flutter it's different. Since there are no activities in Flutter and every screen is a Widget. So we use Navigator here.

Navigator is just like stack, push and pop content. So if we want to launch a Settings screen from current screen then we use:

Navigator.push(context,
    new MaterialPageRoute(builder: (BuildContext context) {
      return new SettingsPage();
    }));

And if we want to go back to previous screen then we use:

Navigator.pop(context);

By default a pushed screen has a back(home) button.

And if we want to replace the current screen with a new one, like we do in Android - replacing login activity with Main activity.

Here we're replacing a loginpage screen with a homepage screen

Navigator.pushReplacement(context,
    new MaterialPageRoute(builder: (BuildContext context) {
      return new HomePage();
    }));

Icon fonts

What is icon font?

Icon font is a font that has icons 😜

How do i create icon fonts? Well you can do that on this website http://fluttericon.com

Usage
  • Download the font and put it in /fonts in your project directory.

  • Most of the instructions are given in your downloaded font zip.

  • And edit your project's pubspec.yaml like this

    flutter: 
        fonts:
             - family: MyFlutterApp #font family name- put the one you've given while creating font
               fonts:
                  - asset: fonts/MyFlutterApp.ttf #your font name
  • Create a dart file with any name e.g. icon_data.dart

  • Copy the code from the dart file provided in font zip file, it could be like this:

    import 'package:flutter/material.dart';
    
    const _kFontFam = 'MyFlutterApp';
    
    //These are icon names
    const IconData xda = const IconData(0xe800, fontFamily: _kFontFam);
    const IconData telegram = const IconData(0xe801, fontFamily: _kFontFam);
    const IconData github_circle = const IconData(0xe802, fontFamily: _kFontFam);
    
  • Now just import your icon dart file e.g icon_data.dart in your dart file where you want to use icon

    import 'icon_data.dart';
    ...
    
    new FlatButton.icon(
        onPressed: () => setState(() {
            _launchURL("https://github.com/TwrpBuilder");
            }),
        icon: Icon(github_circle, size: 30.0,), //Write your icon name here in place of github_circle
        label: Text("Source", style: TextStyle(color: Colors.black, fontSize: 16.0),)

Rest of the documentation will be completed soon

Getting Started

For help getting started with Flutter, view our online documentation.