Git Product home page Git Product logo

flutter_base_structure's Introduction

Flutter Base Structure

This base structure includes following features

  • Bloc Pattern Architecture
  • Google Font to support the App level font
  • Dio for Networking (API Calling)
  • Shared Preferences
  • Connectivity Check
  • CI/CD integration with use of GitHub Action

Folder Structure


Flutter_Base_Structure

References

How to implement CI/CD with GitHub Action and send build on Slack channel


Up project on GitHub

  • Create a sample Flutter application
  • Enable VCS Integration
  • Upload the project on Github
  • Now you have a master branch created for your project

CI/CD

  • Create .github folder under your project main dir.
  • Ex. flutter_base_structure/.github
  • Create workflows folder under .github folder.
  • Create yml file for CI/CD
  • Ex. flutter-workflow.yml under workflows folder
  • So, your structure be like: /.github/workflows/<XYZ.yml>

Define the Repository secrets on GitHub

  • To integrate CI with third party tools (Slack/Telegram/Whatsapp), GitHub Actions needs to use some private credentials.
  • The safe way to add those credentials inside your repository is to use the secrets of repository.
  • Using the secrets, it is possible to store private credentials that are not going to visible on our CI instruction file (.yml)
  • Also store the secrets using cryptography.

How to define secrets on GitHub repository?

  • Go to your GitHub repository
  • Go to settings
  • Go to Secrets and variables / Actions
  • You will find two Tabs. 1. Secrets and 2. Variables
  • Select Secrets
  • Define your secrets here. (Stored with encryption.)
  • Ex. secrets.SLACK_WEBHOOK_URL / secrets.SLACK_BOT_TOKEN / secrets.SLACK_CHANNEL_ID
  • Which will be reference to your .yml file.

Integrating with Slack

  • Go to https://slack.com/
  • Create a new workspace
  • Ex. Spec India
  • Create a channel dedicated for our CI
  • Ex. flutter-cicd
  • Channel is used for communication.
  • We can integrate this channel with the Slack App "Incoming WebHooks"

What is Incoming WebHooks

  • Incoming Webhooks are a simple way to post messages from external sources into Slack.
  • This Incoming Webhook URL is used by GitHub Actions to send messages on Slack channel

To do this

  • Go to your workspace. (Spec India)
  • Select the slack channel (#flutter-cicd)
  • Select the arrow on the side of the channel name
  • Select "integrations" on the menu
  • Search for and select “Incoming WebHooks”
  • Select "Add to Slack"
  • Select the target channel
  • Generate Webhook URL
  • Copy it and store in GitHub repo Actions name like SLACK_WEBHOOK_URL

Update .yml file

name: Flutter CI

on:
  push:
    branches: [ master ]
  pull_request:
    branches: [ master ]

jobs:

  messageSlack:
    runs-on: ubuntu-latest
    steps:
    - name: Slack Notification
      uses: rtCamp/action-slack-notify@v2
      env:
        SLACK_CHANNEL: flutter-cicd
        SLACK_TITLE: Post title
        SLACK_USERNAME: nrup.parikh
        SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK_URL }}
        SLACK_MESSAGE: "New release app available."

Setting Secret variable in GitHub for IOS


BUILD_CERTIFICATE_BASE64

  • This likely refers to the base64-encoded representation of your Apple Developer certificate.
  • You can obtain this by base64 encoding your certificate file. On your local machine, you can use the following command to base64 encode your certificate:
base64 -i path/to/your/certificate.p12
  • Take the output and set it as the secret BUILD_CERTIFICATE_BASE64 in your GitHub repository.

P12_PASSWORD

  • This is the password for your .p12 file, which is usually set during the export process.
  • It's the same password you would use to unlock the .p12 file.
  • Set the password as the secret P12_PASSWORD in your GitHub repository.

BUILD_PROVISION_PROFILE_BASE64

  • Similar to the certificate, this likely refers to the base64-encoded representation of your provisioning profile.
  • You can obtain this by base64 encoding your provisioning profile file.
  • On your local machine, you can use the following command
base64 -i path/to/your/provisioning-profile.mobileprovision

  • Set the output as the secret BUILD_PROVISION_PROFILE_BASE64 in your GitHub repository.

KEYCHAIN_PASSWORD

  • This is the password for the keychain where your certificate and private key are stored.
  • Set the password as the secret KEYCHAIN_PASSWORD in your GitHub repository.

How to generate Key Store for Android


  • First get the Java path from below command
  • In Android studio terminal : flutter doctor -v
  • Copy the path of : Java binary at : C:\Program Files\Android\Android Studio\jbr\bin\java
  • Copy that path up to bin Ex. C:\Program Files\Android\Android Studio\jbr\bin
  • Open Environment variable : System and set it to Path variable
  • Now Go to C:\Program Files\Android\Android Studio\bin
  • Press and Hold Shift + Right click
  • Open the power shell here option
  • Now execute below command to generate key store at specific path
keytool -genkey -v -keystore F:\demos\flutter_base_structure\android\cert\basestructure-keystore.jks -storetype JKS -keyalg RSA -keysize 2048 -validity 10000 -alias basestructure
  • NOTE : Here cert folder created previously to store our keystore in Flutter project's android folder

flutter_base_structure's People

Contributors

nrupparikh avatar abhasar1008 avatar bhargavjanispec avatar kamleshspecindia avatar bhargavjani avatar

Stargazers

 avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.