learnpainless

[learnpainless]

How to implement SSL Pinning in your Flutter App

The HTTP protocol was susceptible to this attack to start with, therefore a secure version of the protocol was created so as to repair this issue. It uses SSL or TLS to encrypt the connection between a client and a server. the server sends its certificate to the client for identification.

[learnpainless]

Flutter web Setup, Development and Benefits with example

Flutter web Setup

**flutter web** is not release for stable release, so if you want to create **flutter web** project then you have to switch to beta version of flutter sdk so that you will get latest features from flutter before the public release. But keep in mind that beta versions are early release which means it make contain some defects of bugs. below are commands to switch to flutter beta sdk, then get latest updates for flutter sdk and finally enable _flutter web_ support

flutter channel beta flutter upgrade flutter config --enable-web`

After enabling flutter web support, “Chrome” in device list if you run `flutter devices`. And you can run your project by selecting Chrome as device. Now you have to options to work with _flutter web_.

Create new project with flutter web support.

Add flutter web support to existing project.

Create new project with flutter web support:

Create new flutter app and flutter web support will enable automatically. Below are commands to create new flutter project (run on Command prompt in windows and Terminal in Linux or Unix):

` flutter create myapp cd myapp`

This will create new flutter app, now you can run and test your app on Chrome browser. To run your flutter web app type below command in Command prompt in windows and Terminal in Linux or Unix.

`flutter run -d chrome`

To build your flutter for web in release mode, you can run below command in Command prompt in windows an## Flutter web Setup, Development and Benefits with example

Flutter web Setup

flutter web is not release for stable release, so if you want to create flutter web project then you have to switch to beta version of flutter sdk so that you will get latest features from flutter before the public release. But keep in mind that beta versions are early release which means it make contain some defects of bugs.

below are commands to switch to flutter beta sdk, then get latest updates for flutter sdk and finally enable flutter web support

flutter channel beta flutter upgrade flutter config --enable-web

After enabling flutter web support, "Chrome" in device list if you run flutter devices. And you can run your project by selecting Chrome as device.

Now you have to options to work with flutter web.

Create new project with flutter web support.

Add flutter web support to existing project.

Create new project with flutter web support:

Create new flutter app and flutter web support will enable automatically. Below are commands to create new flutter project (run on Command prompt in windows and Terminal in Linux or Unix):

flutter create myapp cd myapp

This will create new flutter app, now you can run and test your app on Chrome browser. To run your flutter web app type below command in Command prompt in windows and Terminal in Linux or Unix.

flutter run -d chrome

To build your flutter for web in release mode, you can run below command in Command prompt in windows and Terminal in Linux or Unix.

flutter build web

And this command will generate web files inside build/web directory of your project.

Add flutter web support to existing project:

If you have already built your project in flutter and you want to add support for flutter web, then you can run below command and it will create web folder with configuration inside your project directory.

flutter create .

flutter web Development

development of flutter web app is same as normal flutter app, You have to write code for flutter app only, and when you run or build your project then it will generate html, js files internally. But in some case you have to do some extra changes to work with flutter web app.

for example

if you want to use firebase in your flutter web app then you need to include firebase javascript libraries in <head> tag of index.html file inside web directory of your project.

flutter web Benefits

Your existing flutter project will be used for website. (you don't need to develop your web app from scratch)

PFA (Progressive Web Apps) support enabled by default.

Rich interactive single page applications

Support for core web features across all modern browsers.

Support for plugins. For features like location, camera, and file access, we hope to bridge mobile and the web with a single API.

Debugging web applications using DevTools.

Improved performance, browser support, and accessibility.

So this is how you can create your flutter web project easily, without worrying about web development languages.

via Learn Pain Less

[learnpainless]

Flutter text to speech App Tutorial | flutter tts

A flutter text to speech plugin which is built in Swift for iOS and Java for Android.

It’s Fully compatible on:

Android

iOS

macOS

Web

So if you are planning or developing

Features

Android, iOS, Web, & macOS

speak

stop

get languages

set language

set speech rate

set speech volume

set speech pitch

is language available

Android, iOS

get voices

set voice

speech marks (requires iOS 7+ and Android 26+)

synthesize to file (requires iOS 13+)

iOS, Web

pause

Android

set Silence

iOS

set shared instance

set audio session category

Implementation:

add the dependency to your pubspec.yaml file.

dependencies: flutter: sdk: flutter flutter_tts:

instantiate FlutterTts

final flutterTts = FlutterTts();

To set shared audio instance (iOS only):

await flutterTts.setSharedInstance(true);

To set audio category and options (iOS only):

await flutterTts .setIosAudioCategory(IosTextToSpeechAudioCategory.playAndRecord, [ IosTextToSpeechAudioCategoryOptions.allowBluetooth, IosTextToSpeechAudioCategoryOptions.allowBluetoothA2DP, IosTextToSpeechAudioCategoryOptions.mixWithOthers ]);

After configuring above things you are ready to go, Now simply call speak() function and pass your word and it will speak your word. To stop flutter tts you can call stop() function from flutterTts instance and it will stop speaking.

Few optional things to do:

If you aim is not only speaking word on button click and stop speaking on button click. Then you can use following functions according to your need.

For example

getLanguages(), setLanguage(), setSpeechRate(), setVolume(), setPitch(), isLanguageAvailable(), setSharedInstance()

getLanguages

getLanguages() is used to get available supported languages on device for flutter text to speech plugin, it Returns a list of available languages.

setLanguage

setLanguage() is used to set language, for ex. await flutterTts.setLanguage("en-US");

and other functions

Future _speak() async{ var result = await flutterTts.speak("Hello World"); if (result == 1) setState(() => ttsState = TtsState.playing); } Future _stop() async{ var result = await flutterTts.stop(); if (result == 1) setState(() => ttsState = TtsState.stopped); } List languages = await flutterTts.getLanguages; await flutterTts.setLanguage("en-US"); await flutterTts.setSpeechRate(1.0); await flutterTts.setVolume(1.0); await flutterTts.setPitch(1.0); await flutterTts.isLanguageAvailable("en-US"); // iOS and Web only await flutterTts.pause(); // iOS and Android only await flutterTts.synthesizeToFile("Hello World", Platform.isAndroid ? "tts.wav" : "tts.caf"); // iOS only await flutterTts.setSharedInstance(true); // Android only await flutterTts.setSilence(2); await flutterTts.getEngines();

Few callbacks which are provided from platform

flutterTts.setStartHandler(() { setState(() { ttsState = TtsState.playing; }); }); flutterTts.setCompletionHandler(() { setState(() { ttsState = TtsState.stopped; }); }); flutterTts.setProgressHandler((String text, int startOffset, int endOffset, String word) { setState(() { _currentWord = word; }); }); flutterTts.setErrorHandler((msg) { setState(() { ttsState = TtsState.stopped; }); }); flutterTts.setCancelHandler((msg) { setState(() { ttsState = TtsState.stopped; }); }); // iOS and Web flutterTts.setPauseHandler((msg) { setState(() { ttsState = TtsState.paused; }); }); flutterTts.setContinueHandler((msg) { setState(() { ttsState = TtsState.continued; }); });

via Learn Pain Less

[learnpainless]

How to use Text To Speech inside RecyclerView in Android

What is TTS (Text To Speech)?

TSS or Text To Speech is library provided by Android, which is used to convert any word into voice. This means it can speak any word or phrase provided to this library.

So if you are creating Android Application which require some speaking words then you don’t need to record voice and play inside your application. You can simply pass your words to this library and it will do rest of the things.

We will use android.speech.tts.TextToSpeech library to convert our Strings into voice.

Overview to TTS

First step is to create instance of TextToSpeech.

Pass context to TextToSpeech’s contructor and Callback (which will be called when TextToSpeech will ready).

There is 3rd optional parameter which is “engine” which is used to pass custom TextToSpeech engine. (eg. Samsung TTS etc.).

After creating instance call speak() function from instance and it will speak the provided string.

You can also specify language of your text to TextToSpeech library.

Example Project:

TextToSpeech inside RecyclerView:

Code of MainActivity.kt

Code of activity_main.xml

Code of SpeechAdapter.kt

Code of adapter_item_speech.xml

Full Source Code

SpeechTextRecyclerView on Github

Star this github repository and Share with your friends as well.

via Learn Pain Less's RSS Feed

[learnpainless]

EditText editable is deprecated How to use inputType in Android

If you are working in non editable EditText, then you may notice that now its showing warning in xml layout file, Because android:editable is now deprecated in Android. And it will be removed in upcoming version of android. And if you navigate to official website then they will suggest you to use android:inputType instead of android:editable. But they haven’t explained that how to use android:inputType to disable input in EditText.

So here is solution:

Make EditText non editable in Android

First method:

first method is using android:inputType which is suggested by official android team. To use this just set android:inputType="none" and it will become non editable.

Second method:

In you xml code set focusable="false", android:clickable="false" and android:cursorVisible="false" and this will make your EditText treat like non editable.

for example

in XML

<EditText android:id="@+id/myEditText" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Hint" android:focusable="false" android:clickable="false" android:cursorVisible="false" />

Third method:

If you still want to use editable property then you can set this from Java or Kotlin code.

for example

In Java

EditText et = findViewById(R.id.myEditText); et.setEnabled(false);

In Kotlin

myEditText.isEnabled = false

It depends on you that which method will you preffer. Write in comments which method you like and why so other users can take benefit of this.

via Learn Pain Less's RSS Feed

[learnpainless]

What is Netlify CMS, why should i use this CMS? Pro and Cons of Netlify CMS

More about Netlify CMS:

Netlify is “all-in-one platform for automating modern web projects”, serving more advanced users, like website developers.

The Netlify CMS is predicated on JamStack technology, which was wont to build the foremost popular static site generator. JamStack is mentioned as “the way forward for development architecture”. It’s built on serverless, headless technology, supported client-side JavaScript , reusable application programming interfaces (APIs), and prebuilt Markup. This structure makes it safer than a server-side CMS like WordPress.

Netlify isn’t a static site generator; it’s a CMS to create static and headless web projects. Content is stored in your Git repository, alongside your code, for straightforward editing and updating.

Netlify CMS distributes static sites across its CDN (content delivery network). (Imagine what you’ll achieve in terms of page load speed when you’re serving pre-built pages from the CDNs nearest to visitors). Because files are lighter, you’ll host your site within the cloud and avoid web hosting fees. Most developers find Netlify platform’s free tier plan offers quite enough for private projects.

Don’t get confused, Netlify CMS is different from the Netlify platform , which may be wont to automatically build, deploy, serve, and manage your frontend sites and web apps. consistent with Netlify , the Netlify CMS has never been locked to their platform (despite both having an equivalent name).

What are static site generator?

Static site generators convert certain pages on your website into static site versions (simply HTML files). When a user requests a page on the static site, the request is shipped to the online server (HTML files directly served to users without any Database query), which then finds the corresponding file and returns it to the user. This process helps the location perform faster, and cache easier.

This process is additionally safer. The static site generator doesn’t believe databases or other data sources and it also avoids server-side processing when accessing the web site .

Several static site generators can convert existing pages on your WordPress site in order that you don’t need to start over from scratch.

However, static site generators do have a couple of downsides, including:

Incompatibility with page builders. If you don’t have the skills to code, you won’t be ready to build a site without the assistance of page builders.

Trouble managing large sites. Websites that have thousands of pages, multiple authors, and content published regularly can pose a drag for a static site development environment. The frequency and quantity of creating page edits can delay updates as sites must be rebuilt and tested.

Server site functionality. Everything comes in from the static HTML files, so you can’t ask your users for input (such as allowing users to make a login or post a comment).

Fortunately, many of those static website limitations are often addressed through Netlify.

Before we get into the pros and cons of Netlify, let’s talk about static site generators.

Let’s compare Netlify CMS with WordPress

WordPress and Netlify CMS are two of the foremost robust CMS (content management systems) on the market. Both are open-source and liberal to use, but that’s about where their similarities end.

WordPress is more popular — it powers almost 35% of all websites on the web . This is often likely thanks to the very fact that WordPress caters to users who don’t have prior programming experience and are trying to find an easy-to-use CMS.

On the opposite hand, Netlify appeals to developers concerned about website performance. WordPress’s heavy rear can impact a website’s speed and security.

If you ask a developer the way to speed up an internet site , they could recommend converting to a static site. This is often ideal for informational sites that change infrequently and need no user interaction.

For more complex sites, you would like a database-driven CMS, like WordPress. Where you want your users to create their account.

Let’s discuss about Pros and Cons of Netlify CMS

Pros:

Easy to setup website

Very easy and intuitive UI

Both CLI (Command Line Interface) and Web Based available.

Support custom domains and setup DNS for your domain automatically.

Supports HTTPS, and it’s very easy to set up.

Can pull updates from Git providers like Github, Gitlab etc.

Supports all static site generators

Cons:

Need understanding web programming (React, Javascript, TypeScript).

Need understanding for Markdown (few tools are available which can convert html or word to Markdown)

Need help?

If you want to make your first website then you can hire me on Fiverr and i can create Blog in Gatsby framework and Host on Netlify CMS.

via LearnPainLess’s RSS Feed