DEV Community: 0xAirdropfarmer

5 Cools Flutter Fitness App Template 2021

0xAirdropfarmer — Wed, 21 Apr 2021 08:26:18 +0000

What do most people look for when they want to get fit and healthy? Definitely, the fitness applications that provide them with the best workout routines and health instruction to get themselves fit and healthy. But almost every fitness application does that, but we are looking for the ones that provide the best UI design that grabs the users’ eye and indulges them in the best experience. We also look for some robust features that help users manage their fitness routines and get what they want out of the fitness app. Well, this article is not about the fitness app but about the development of the fitness app using some of the best fitness app templates built using Flutter and dart programming.

Flutter mobile development framework is definitely making its mark in the world of mobile app development with its ability to create pixel-perfect UI and house powerful features. Using Flutter, we can definitely build an app that has beautiful UI and state-of-the-art features. But, the thing that makes app development even easier, fast, and cheap is the availability of app templates.

Here, we list out some of the best Flutter fitness app templates out there in the market that provide intuitive and elegant UI interfaces with robust and dynamic features:

1. Flutter Fitness App Template by Instaflutter

If you are looking for a fitness app template build using Flutter that has everything then this is it. One of the best Flutter fitness apps templates out there in the market offered by instaflutter.com. The complete fitness app templates offering more than 50+ screens. Each screen is equipped with state-of-the-art UI containing beautiful design elements ensuring a highly intuitive user experience. This template comes with complete source code in Flutter & Dart and also free lifetime updates for future maintenance purposes.

With beautiful UI screens comes powerful and robust features. The template houses an authentication mechanism leveraging 2-way authentication. The profile features offer screens to fully customize your fitness settings. The other major feature includes Calorie calculations screens, steps calculation screen, calorie burn index, a podcast for meditation, music player as well as a push notification. It can basically be a social app for fitness personals. The template offers heavyweight features which are bound to catch your eye along with modern UI designed for optimum user experience. If you are thinking of building your next fitness application in Flutter, then this is the place to start.

2. Flutter Fitness App Template

Another great fitness app template build completely using Flutter and dart programming offered by codecanyon. The template houses more that 20 screens build completely using Flat UI design specification. The coding structure is well organized with clear and concise coding practice. The entire UI interface looks clean and intuitive. The features are will equipped with step wise approach to using the app properly. The template offers full set of features to customize profile, workout routines, upload videos, store the trending routines and videos, publish pictures. The entire UI is dark themed and profile feature resembles that of the Instagram. The features offered are well adequate for any fitness application. Hence, this template can surely be one of the best choices for your next fitness application program if you are looking to build one using Flutter app development framework.

3. Flutter Fitness Workout UI

The Flutter fitness app UI template offering a simple and clean UI interface. This template may not be as powerful and offer a maximum feature like the ones before but certainly packs a punch if you are looking to develop the fitness app only concentrating on fitness features. This template generally offers features for workout routines at different levels. The users can keep track of their daily exercise routine and build up their level as they progress. The UI designs seem simple and intuitive. The app highly concentrates on motivating you to exercise rather than other social and media stuff. The features such as workout description, scheduling, level upgrades, instructions, etc are available in this application template. All in all the best Flutter fitness app template concentrating fully on workouts and exercise.

4. Flutter fitness Workout

This Flutter fitness app template is entirely similar to the one above. The UI design implementations, as well as the features offered, are very much the same. The only new thing it adds is the integration of Admob which will certainly help to make some money out of the app once published. The template offers the full source code of the app entirely written in Flutter and dart programming. The UI designs in the screen look intuitive and anyone with basic knowledge of application users can easily use it. The designs look simple and clean in terms of screen. The major features include workout routines, a specific list of workouts, workout descriptions, scheduling, level upgrades, instructions, etc. The template is ready to be published in the app store if need be but customizable based on needs as well. If you are looking for a simple workout app template built using Flutter that can make some cash when published then this is it.

5. Flutter Flare: Activity and Fitness App UI

Probably the simplest in terms of UI design but power-packed in terms of features offered, this template is the most balanced app template available in the fitness genre built entirely using Flutter and dart. The template offers 6+ screens with a simple and elegant UI which looks highly intuitive. It houses features such as authentication (login, email registration), chat interface, Home screen with filter option to browse through different workout manuals, workout detail screen, Map feature, inbox, notifications, Profile, etc. The entire template contains more than 11 reusable Widgets which you can customize and reuse on different screens easily. All the basic features required in the fitness app are available in this template along with simple and modern UI which makes this template great for your next Flutter fitness app project.

Conclusion

This article lists out some of the best Fitness app templates built entirely using Flutter and dart programming. The UI interface range from simple to complex and the same goes for features as well. If you are going for the fitness app template that has everything in terms of UI and features then definitely go for the one by instamobile. If you are looking for a fitness app with great UI and some social features then the second one would be the best. And if you are looking for a fitness app solely focused on workout features then definitely the third and fourth. The fifth one is the balanced one with simple UI and adequate features. Now, it is up to you to choose the best one the fits your need for your next Flutter fitness application.

Create Instagram Photo Filters in React NativeReact Native

0xAirdropfarmer — Fri, 16 Apr 2021 05:04:18 +0000

Instagram has been growing like crazy over the past few years, and one of its key features that fueled that growth was the famous photo filters. By allowing users to apply various filters to their photos to make them better looking, Instagram has created an amazing product. Any modern photo app must support photo filters nowadays, so we are going to take a look at how to implement the Instagram photo filters in React Native.

In today’s article, we’re going to be talking about how to implement Instagram photo filters. We’re going to use the **react-native-image-filter-kit** package*.* Here at Instamobile, we use this library to seamlessly build this photo filters feature into our Instagram Clone.

Implementing Instagram Photo Filters in React Native

First of all, let’s install the package we mentioned earlier into your React Native project, by running:

npm install -s react-native-image-filter-kit

Here’s a simple React Native project that applies the Instagram photo filters to an image included in the codebase (the image name is “parrot.png”, so make sure you include it in your project folder, so that it can be loaded in the app). In the App.js file, simply place the following code snippet:

import React from 'react';
import {Image, SafeAreaView} from 'react-native';
import {Emboss} from 'react-native-image-filter-kit';

const App = () => (
  <>
    <SafeAreaView />
    <Image
      style={styles.image}
      source={require('./parrot.png')}
      resizeMode={'contain'}
    />
    <Emboss
      image={
        <Image
          style={styles.image}
          source={require('./parrot.png')}
          resizeMode={'contain'}
        />
      }
    />
  </>
);

const styles = {
  image: {
    width: 320,
    height: 320,
    marginVertical: 10,
    alignSelf: 'center',
  },
};

The Emboss component provided by the react-native-filter-kit takes an Image component as a prop and applies the filter as seen in the below screenshot.

There are a ton of other filter components provided by the library react-native-image-filter-kit so we are going to find a way to implement a more comprehensive filter just like the way it is done in the Instagram app itself.

First of all we need to define an array of filter components that we are going to render and select from:

import {
  AdenCompat,
  _1977Compat,
  BrannanCompat,
  BrooklynCompat,
  ClarendonCompat,
  EarlybirdCompat,
  GinghamCompat,
  HudsonCompat,
  InkwellCompat,
  KelvinCompat,
  LarkCompat,
  LofiCompat,
  MavenCompat,
  MayfairCompat,
  MoonCompat,
  NashvilleCompat,
  PerpetuaCompat,
  ReyesCompat,
  RiseCompat,
  SlumberCompat,
  StinsonCompat,
  ToasterCompat,
  ValenciaCompat,
  WaldenCompat,
  WillowCompat,
  Xpro2Compat,
} from 'react-native-image-filter-kit'; 

const FILTERS = [
  {
    title: 'Normal',
    filterComponent: AdenCompat,
  },
  {
    title: 'Maven',
    filterComponent: MavenCompat,
  },
  {
    title: 'Mayfair',
    filterComponent: MayfairCompat,
  },
  {
    title: 'Moon',
    filterComponent: MoonCompat,
  },
  {
    title: 'Nashville',
    filterComponent: NashvilleCompat,
  },
  {
    title: 'Perpetua',
    filterComponent: PerpetuaCompat,
  },
  {
    title: 'Reyes',
    filterComponent: ReyesCompat,
  },
  {
    title: 'Rise',
    filterComponent: RiseCompat,
  },
  {
    title: 'Slumber',
    filterComponent: SlumberCompat,
  },
  {
    title: 'Stinson',
    filterComponent: StinsonCompat,
  },
  {
    title: 'Brooklyn',
    filterComponent: BrooklynCompat,
  },
  {
    title: 'Earlybird',
    filterComponent: EarlybirdCompat,
  },
  {
    title: 'Clarendon',
    filterComponent: ClarendonCompat,
  },
  {
    title: 'Gingham',
    filterComponent: GinghamCompat,
  },
  {
    title: 'Hudson',
    filterComponent: HudsonCompat,
  },
  {
    title: 'Inkwell',
    filterComponent: InkwellCompat,
  },
  {
    title: 'Kelvin',
    filterComponent: KelvinCompat,
  },
  {
    title: 'Lark',
    filterComponent: LarkCompat,
  },
  {
    title: 'Lofi',
    filterComponent: LofiCompat,
  },
  {
    title: 'Toaster',
    filterComponent: ToasterCompat,
  },
  {
    title: 'Valencia',
    filterComponent: ValenciaCompat,
  },
  {
    title: 'Walden',
    filterComponent: WaldenCompat,
  },
  {
    title: 'Willow',
    filterComponent: WillowCompat,
  },
  {
    title: 'Xpro2',
    filterComponent: Xpro2Compat,
  },
  {
    title: 'Aden',
    filterComponent: AdenCompat,
  },
  {
    title: '_1977',
    filterComponent: _1977Compat,
  },
  {
    title: 'Brannan',
    filterComponent: BrannanCompat,
  },
];

Next, we have to render a horizontal list of filters at the bottom and dynamically change the filter image as the center image when a filter is selected. Your App.js file will then become:

import React, {useRef, useState} from 'react';
import {
  FlatList,
  Image,
  SafeAreaView,
  StyleSheet,
  Text,
  TouchableOpacity,
} from 'react-native';

const App = () => {
  const extractedUri = useRef('https://www.hyundai.com/content/hyundai/ww/data/news/data/2021/0000016609/image/newsroom-0112-photo-1-2021elantranline-1120x745.jpg');
  const [selectedFilterIndex, setIndex] = useState(0);

  const onExtractImage = ({nativeEvent}) => {
    extractedUri.current = nativeEvent.uri;
  };

  const onSelectFilter = selectedIndex => {
    setIndex(selectedIndex);
  };

  const renderFilterComponent = ({item, index}) => {
    const FilterComponent = item.filterComponent;
    const image = (
      <Image
        style={styles.filterSelector}
        source={require('./car.jpg')}
        resizeMode={'contain'}
      />
    );

    return (
      <TouchableOpacity onPress={() => onSelectFilter(index)}>
        <Text style={styles.filterTitle}>{item.title}</Text>
        <FilterComponent image={image} />
      </TouchableOpacity>
    );
  };

  const SelectedFilterComponent = FILTERS[selectedFilterIndex].filterComponent;

  return (
    <>
      <SafeAreaView />
      {selectedFilterIndex === 0 ? (
        <Image
          style={styles.image}
          source={require('./car.jpg')}
          resizeMode={'contain'}
        />
      ) : (
        <SelectedFilterComponent
          onExtractImage={onExtractImage}
          extractImageEnabled={true}
          image={
            <Image
              style={styles.image}
              source={require('./car.jpg')}
              resizeMode={'contain'}
            />
          }
        />
      )}

      <FlatList
        data={FILTERS}
        keyExtractor={item => item.title}
        horizontal={true}
        renderItem={renderFilterComponent}
      />
    </>
  );
};

const styles = StyleSheet.create({
  image: {
    width: 520,
    height: 520,
    marginVertical: 10,
    alignSelf: 'center',
  },
  filterSelector: {
    width: 100,
    height: 100,
    margin: 5,
  },
  filterTitle: {
    fontSize: 12,
    textAlign: 'center',
  },
});

This source code will produce a simple React Native app that supports selecting various Instagram photo filters, just like the real Instagram photo editor:

After selection, the handler method onExtractImage saves the URL of the extracted image after the filter has been selected on the variable extractedUri ref which you could save on your server.

Conclusion

Now that we have learned how to implement Instagram filters you should check out our Instagram Clone template, which is a fully functional codebase, supporting most of the Instagram features, such as photo filters, ephemeral stories, and post feed.

Originally published at https://www.instamobile.io on April 15, 2021.

How to Get Your Location in Flutter

0xAirdropfarmer — Fri, 09 Apr 2021 13:54:16 +0000

If you are building a mobile app in Flutter and you are looking to learn how to get the current user location, then this is the tutorial you were looking for.

In the current context, there are numerous applications that make use of the device location service to implement various location-based features in the application. In mobile apps such as delivery app, eCommerce app, booking apps, geolocation apps, etc the location service is very essential. So let’s take a look at how to access the location service of a device to get the current location of the user/device.

In this tutorial, we are going to use the geolocator plugin to access the location service of the device and get the current location coordinates of the user. The geolocator library has made the location service access and getting current location coordinates much easier. The idea is to implement a simple UI template to display the current location and a function to fetch the current location using the geolocator library. So, let’s get started!

Setting up the Flutter Project

First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other Flutter app development-related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:

flutter create flutter_location_example

After the project has been set up, we can navigate inside the project directory and execute the following command in the Terminal to run the project in either an available emulator or an actual device:

flutter run

Scaffolding The App Project

Now, we are going to scaffold the project by removing the default template codes. First, we need to remove the default MyHomePage stateful class widget from the main.dart. Then, we need to create a new stateful widget class called CurrentLocation. This class will hold all the UI template code and the functions to get the current location of the user. The overall code is provided in the code snippet below:

class CurrentLocation extends StatefulWidget {
  CurrentLocation({Key key}) : super(key: key);

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

class _CurrentLocationState extends State<CurrentLocation> {

  String currentLocation;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Location"),
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                  decoration: BoxDecoration(
                    color: Colors.teal[50]
                  ),
                  padding: EdgeInsets.symmetric(horizontal: 16, vertical: 8),
                  child: Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Icon(Icons.location_on),
                          SizedBox(
                            width: 8,
                          ),
                          Expanded(
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.start,
                              children: <Widget>[
                                Text(
                                  'Location',
                                ),
                                (currentLocation!=null)?Text(currentLocation):Container(),
                              ],
                            ),
                          ),
                          SizedBox(
                            width: 8,
                          ),
                        ],
                      ),
                    ],
                  )),
                  RaisedButton(
                    color: Colors.blue[50],
                    onPressed: (){
                    },
                    child: Text("Get Location"),
                  )
            ],
          ),
        ),
      ),
    );
  }
}

For the template, we have used the Scaffold widget with an App bar and body. The template is simple with the use of a Column widget that houses other widgets. We have kept a Container that will show the location once fetched. Here, we have also used the icon as well. Then, we have RaisedButton whose onPressed event is empty as of now. Later, we are going to assign a function that grabs the current location value and sets the value to the currentLocation variable. Also, the currentLocation value is used as a conditional rendering to show the location value on the template.

Now, we need to call the class widget in the home option of the MaterialApp widget of MyApp stateless class:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: CurrentLocation(),
    );
  }
}

Hence, we will get the following result on the emulator screen:

Installing the Geolocator Package

Now, we need to install the package called geolocator that enables us to fetch the location and play around with it. This library provides easy access to platform-specific location services. It offers a cross-platform (iOS, Android) API for generic location (GPS, etc.) functions. Now in order to install this library, we need to add the geolocator to pubspec.yaml file as shown in the code snippet below:

dependencies:
  flutter:
    sdk: flutter

  geolocator: ^7.0.1

Make sure to upgrade the Flutter/Dart SDK if this plugin does not work.

Now, there are some configurations that need to be done so that our Flutter app can use the plugin properly.

First, the geolocator plugin requires the AndroidX version of the Android Support Libraries. Hence, we need to add these support libraries to gradle.properties file of ./android folder as directed in the code snippet below:

android.useAndroidX=true
android.enableJetifier=true

Then, we need to make sure that we set the compileSdkVersion in our ./android/app/build.gradle file to 30:

android {
  compileSdkVersion 30
  ...
}

Now in order for our Flutter app to access location service from the device, we need to add certain permissions first. For location service to work, we need to add the ACCESS_COARSE_LOCATION and the ACCESS_FINE_LOCATION permission to our AndroidManifest.xml file. To add these permissions, we need to go to ./android/app/src/main/AndroidManifest.xml file and add these permissions as a direct child of tag:

<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />

For Android 10, it will beneficial to add ACCESS_BACKGROUND_LOCATION permission as well. This permission will enable the app to keep receiving updates even when our app is running in the background:

<uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />

Hence, we have successfully applied all the necessary configurations to use the geolocator plugin in our Flutter app.

Getting the User Location in Flutter

Now, we are going to implement a function that checks for permissions if the app can use the location service of the device or not and then return the current location of the device or user.

First, we need to initialize a Position instance variable that will hold the location position value. Then, we can use the LocationPermission instance provided by the geolocator plugin to check the permission. First, we check if the permission to use location is already available for the app using the checkPermission() method provided by the geolocator plugin. If not then, we request to grant permission using requestPremission() method. If we manually deny the permission then, we assign permission denied value to currentLocation else we fetch the current position value using the getCurrentPosition method and assign it to the position variable. Now, the position variable will hold the latitude and longitude value which we can set to the currentLocation variable.

The overall Flutter code for this is provided in the code snippet below:

Position position;

  void _getCurrentLocation() async {
    LocationPermission permission;

    permission = await Geolocator.checkPermission();
    if (permission == LocationPermission.denied) {
      permission = await Geolocator.requestPermission();
      if (permission == LocationPermission.denied) {
        setState(() {
          currentLocation ="Permission Denied";
        });
      }else{
        var position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
        setState(() {
          currentLocation ="latitude: ${position.latitude}" + " , " + "Logitude: ${position.longitude}";
        });
      }
    }else{
      var position = await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high);
      setState(() {
        currentLocation ="latitude: ${position.latitude}" + " , " + "Logitude: ${position.longitude}";
      });
    }
  }

Lastly, we need to assign this function to the onPressed event of the RaisedButton widget that we implemented earlier in the template:

RaisedButton(
  color: Colors.blue[50],
  onPressed: (){
    _getCurrentLocation();
  },
  child: Text("Get Location"),
)

Hence, the overall demo of getting the current user location of the device/user is shown in the simulation below:

As we can notice, once we tap on the “Get location” button, we will be asked if the permission of the device’s location service is to be provided to the app. If allowed, the location position values are displayed on the screen.

Conclusion

The main objective of this tutorial was to demonstrate how to fetch the current location position of the user or device by using the geolocator package. The availability of this geolocator package made the whole process easier for us. The plugin is capable of much in terms of working with location values and whatnot. We can get the last known location, current location, continuous location updates, check for location permissions, calculate the distance between the locations and bearing. Now, the challenge is to use these features provided by the plugin to create location-centric Flutter applications.

Originally published at https://www.instaflutter.com on April 8, 2021.

How to Implement Beautiful Charts in Flutter

0xAirdropfarmer — Mon, 05 Apr 2021 00:21:08 +0000

In this article, we are going to learn how to implement beautiful charts in Flutter. Charts are a great visual way to represent any type of data, be it statistical data, financial data, or stats. We are using charts in a lot of our Flutter app templates, and we are going to describe how we implemented them.

When it comes to data visualization or representation in any field, the first thing that comes to our mind is charts. Charts are an effective and efficient mechanism to display statistical data that will not only make it easier to read the data but also compare and contrast. It helps display data in an informative way that makes it easy for readers to comprehend the overall data.

Now that we know the importance of charts in the statistical world, we should also know that charts are very useful to display complex data in mobile applications as well. Here, we are going to learn how to add charts to a Flutter mobile app.

The Flutter mobile application development framework is booming in the current context and it will surely take the center stage as a state-of-the-art mobile app development tech in near future. In this tutorial, we are going to make use of a charts_flutter package to add different charts to our Flutter app UI. The idea is to install the library and use the different charts widget offered by it. We will also learn how to define the series list value that is to be used by chart widgets to visually represent the data.

So, let’s get started!

Setting Up the Flutter Charts Project

First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other flutter app development-related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:

flutter create chartpost

After the project has been set up, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:

flutter run

Creating a Home Page UI

Now, we are going to create a home page Scaffold. For that, we need to create a file called home_page.dart. Inside the file, we can use the code from the following code snippet:

import 'package:flutter/material.dart';
import 'package:charts_flutter/flutter.dart' as charts;
class HomePage extends StatelessWidget {
  @override
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Bitcoin price from Jan to March (2021) "),
      ),
      body: Center(
        child: Text("Hello, Charts!")
        ),
    );
  }
}

Here, we have returned a simple Scaffold widget with an App Bar and a body from the stateless widget class called HomePage.

Now, we need to import this stateless widget class in our main.dart file and assign it to the home option of the MaterialApp widget as shown in the code snippet below:

import 'package:chartpost/home.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

Now if we re-run the app, we will get the following result in our emulator screen:

Adding the charts_flutter Plugin

Since we are going to add charts to our app, we are going to use the package called charts_flutter. This package is a Material Design data visualization library written natively in Dart. It provides a wide range of charts for data visualization which is lightweight and easy to configure as well. Now in order to install this library into our flutter project, we need to add the charts_flutter: ^0.8.1 line to our pubspec.yaml file as directed in the code snippet below:

dependencies:
  flutter:
    sdk: flutter

  charts_flutter: ^0.8.1

After successful installation, we are ready to use the chart widgets offered by this package.

Bar Charts in Flutter

In this section we are going to learn how to add a bar chart to our Flutter app. Firstly, we are going to create a model file that defines attributes of the data to be shown in the bar chart. Here, we are going to name the file bitcoin_price_series.dart. Inside, we are going to define a class called BitcoinPriceSeries that takes in three parameters - month, price, and color. The overall code implementation is shown in the code snippet below:

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:flutter/foundation.dart';

class BitcoinPriceSeries {
  final String month;
  final int price;
  final charts.Color barColor;

  BitcoinPriceSeries(
      {@required this.month,
      @required this.price,
      @required this.barColor});
}

Now, we need to create a new file called bitcoin_price_chart.dart to define the chart structure. Here, we are going to implement a stateless widget called BitcoinPriceChart that returns the Bar chart with series value. The Series configuration offered by charts library helps us define each series of data. The exact implementation of how to configure the series value is provided in the code snippet below

import 'package:charts_flutter/flutter.dart' as charts;
import 'package:chartpost/bitcoin_price_series.dart';
import 'package:flutter/material.dart';

class BitcoinPriceChart extends StatelessWidget {
  final List<BitcoinPriceSeries> data;

  BitcoinPriceChart({@required this.data});

  @override
  Widget build(BuildContext context) {
    List<charts.Series<BitcoinPriceSeries, String>> series = [
      charts.Series(
          id: "Price",
          data: data,
          domainFn: (BitcoinPriceSeries series, _) => series.month,
          measureFn: (BitcoinPriceSeries series, _) => series.price,
          colorFn: (BitcoinPriceSeries series, _) => series.barColor)
    ];

Now that we have the list data that holds the bar chart series data, we can apply it to the UI template. Now, we are going to return a Container widget with Card widget as child that holds the BarChart widget taking the list and animate boolean value as parameters. The overall implementation is provided in the code snippet below:

return Container(
      height: 400,
      padding: EdgeInsets.all(20),
      child: Card(
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            children: <Widget>[
              Text(
                "Bitcoin price from Jan to March (2021) ",
              ),
              Expanded(
                child:( charts.BarChart(series, animate: true)),

              )
            ],
          ),
        ),
      ),
    );
  }
}

Now, we are going to add the Bar chart to our home page. For that, we need to import the BitcoinPriceChart stateless class widget into the home_page.dart file as shown in the code snippet below:

import 'package:flutter/material.dart';
import 'package:chartpost/bitcoin_price_series.dart';
import 'package:chartpost/bitcoin_price_chart.dart';
import 'package:charts_flutter/flutter.dart' as charts;

After import, we can define the list that stores the data based on BitcoinPriceSeries model as shown in the code snippet below:

@override
  Widget build(BuildContext context) {
     final List<BitcoinPriceSeries> data = [
    BitcoinPriceSeries(
      month: "Jan",
      price: 50000,
      barColor: charts.ColorUtil.fromDartColor(Colors.red),
    ),
    BitcoinPriceSeries(
      month: "Feb",
      price: 60000,
      barColor: charts.ColorUtil.fromDartColor(Colors.blue),
    ),
    BitcoinPriceSeries(
      month: "March",
      price: 58000,
      barColor: charts.ColorUtil.fromDartColor(Colors.green),
    ),
  ];

Lastly, we need to add the BitcoinPriceChart widget to the body of the Scaffold in home page bypassing the required list data as shown in the code snippet below:

return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.red,
        title: Text("Bitcoin price from Jan to March (2021) "),
      ),
      body: Center(
        child: BitcoinPriceChart(
      data: data,
    )
        ),
    );
  }

Hence, we will get the bar chart on our home screen as demonstrated in the emulator screenshot below:

Hence, we have successfully added a bar chart to our Flutter app.

Pie Charts in Flutter

Now that we know how to configure the data for the bar chart, we can easily add a pie chart as well using the exact same series list data. The bar chart data series and pie chart data series share the same format of data. Hence, we can simply add a pie chart using the PieChart widget offered by charts library supplying series list and animate boolean parameters as shown in the code snippet below:

Expanded( 
  child:( charts.BarChart(series, animate: true)),
 ), Expanded(
    child:( charts.PieChart(series, animate: true)),       
 )

Note that, this PieChart widget was directly added to the bitcoin_price_chart.dart file just below the BarChart widget inside the Column widget.

Hence, we have successfully added a Pie chart to our Flutter app as well.

Conclusion

The main goal of this tutorial was to demonstrate how to implement various charts in Flutter. The availability of the charts_flutter library made it easier to add charts to our Flutter app. The series-based data configuration along with lightweight widgets for a wide variety of widgets makes this library very powerful and efficient as well. Here, we learned how to add a bar chart and a pie chart. We also learned how to configure the series-based data to feed to chart widgets.

Now the challenge is to add other types of charts to the Flutter application. The concept for adding the chart widget is the same but the data configuration might be a bit different.

Originally published at https://www.instaflutter.com on April 2, 2021.

I created a Bot that will help you buy Doge or BTC based on Elon Musk’s tweet

0xAirdropfarmer — Thu, 11 Mar 2021 12:01:38 +0000

Now, we do not need to wait for Elon Musk to tweet something. We are especially waiting for Elon Mush to tweet about some crypto-currency or company so that its value goes up in the market.

Why don’t we create a bot that will analyze Elon Musk’s tweet and inform us about the tweet?

The bot is fairly simple. There are two sides: server-side and client-side.

The server-side works in active mode. It monitors Elon Musk’s tweet and sends the buy signal to the client when detecting the tweet containing some hint of Doge or Bitcoin word.

The client-side works in passive mode. It waits for the signal from the server on Doge or Bitcoin so that the client can analyze the info. Then finally, the client can decide on which coin to buy.

The exact interpretation of the client and server-side is demonstrated in the flow image below:

Limitation…

For now, there is only support for Binance which is for people in the US.

Please subscribe to this email list and sign up to Gate.io or Coinbase using my referral link.

Roadmap

Detect only Doge or Bitcoin words from the tweets. ( already done )
Buy in the Future market. ( *not done yet *)
Detect Doge and Bitcoin logo from the tweet image. ( on the way on train model)
Perform sentiment analysis on the stock. only for people located in the USA that can use Alpaca or Robinhood. ( also not start yet that feature benefit only people in the USA may be kept on a paid plan)

If you have any Queries…

You can join our [Facebook group](https://www.facebook.com/groups/261805308872238\) and ask.

Now, if you want to start implementing the bot then follow the instructions provided in the steps below:

Setup Server for Client

In order to run the bot on a server, we require a cheap server. For that, I recommend Cloudways because they provide a 10$/Month VPS server.

The pricing plan is shown in the screenshot below:

First, we need to go to the registration page to sign up as shown in the screenshot below:

Then, we need to set the password as shown in the screenshot below:

After successful signup, we will be redirected to the dashboard screen. In the dashboard, we need to change the fields specifying Your Application, Your Server, Your project as shown in the screenshot below:

Then, w need to pick the Laravel as a server application as shown in the screenshot below:

Now to create a new server instance, we need to pick the server size and location as directed in the screenshot below:

Here, we can see how much we get charged hourly and monthly.

Next, we simply need to click on the **LAUNCH NOW **button as directed in the screenshot below:

The launch operation will take some time. Hence, we may need to wait for around 5 minutes for the setup process to complete:

After successful setup, we will get access to the server dashboard as shown in the screenshot below:

Next, we need to go to the Setting & Package menu and select the Advanced tab as directed in the screenshot below:

Now, we need to scroll down the same tab and enabled the **Access Application VIA IP **as directed in the screenshot below:

Lastly, we need to **SAVE CHANGES **as directed in the screenshot below:

Now, we need to go to set up our BOT. For that, we need to go to the **Applications **tab as shown in the screenshot below:

We can see our blank app below:

Now, we need to go to **Deployment via Git **from the sidebar as directed in the screenshot below:

Here, we need to click on **GENERATE SSH KEY **as directed in the screenshot below:

Register on GitHub to auto-update the bot

For this tutorial, I chose to host source code on GitHub. It will make the server easier to upgrade.

Also, make sure that you have a GitHub account. If you don’t, you can go ahead and Sign up as directed in the screenshot below:

The registration process is simple in GitHub, we just need to fill the credentials as directed in the screenshot below:

After successful registration with an email, we need to go to account settings and navigate to SSH and GPG keys tab as shown in the screenshot below:

Then, we need to hit the **New SSH key **as directed in the screenshot below:

Now we need to come back to Cloudways and click on the **View SSH KEY **tab. Here, we can get the SSH key and add it to GitHub. The exact location to get the key is shown in the screenshot below:

From the SSH KEY dialog, we need to copy the SSH KEY:

And then, we need to paste the SSH key to GitHub as shown in the image below:

Next, we need to come back to Cloudways and add the bot URL to git@github.com:krissnawat/elonbot_client.git.

Then, we need to hit the PULL button as directed in the image below:

Now, if everything works fine then it means that the download was successful.

Now our next step is to set up the bot. For that, we need to have a Chrome extension called Secure Shell App. We can simply search for it in google from Chrome browser and add it.

After the successful installation, we can hit **Launch App **which will redirect us to the following screen:

Here, we need to paste the username and Server IP address.

But first, we need to know where to get these credentials.

For that, we need to go to our app as shown in the screenshot below:

If we navigate inside the app, we will see the credentials as highlighted in the screenshot below:

For now, we can connect and access the inside server as shown in the terminal screenshot below:

The terminal for the server is shown in the image below:

Now next quick thing is to run some commands in the terminal. We need to execute the composer install.

After the successful execution, we need to run **nano .env **command as shown in the terminal screenshot below:

Now inside the .env file, we need to update the database credential as highlighted in the image below:

Now, we need to head back to Cloudways dashboard where we need to locate the DB Name, Username, Password. We just need to copy and replace in the .env file:

When done, we need to hit CTRL+X to save as directed in the screenshot below:

Next, we need to execute the command shown in the snippet below:

php artisan migrate --seed

The exact execution of the command in the terminal is shown in the screenshot below:

Hence, we have completed the installation for now. We can access our app with URL in the Cloudways dashboard:

If we navigate to the URL, we will be redirected to the login page. But first, we need to register as directed in the image below:

We need to type in our credentials and hit the REGISTER button:

After successful sign-up, we need to perform the following task:

Find and create an API key and Secret Key on Binance.
Choose which coin that you need to buy.
Start bot.
Finally, we need to prepare USDT in the Binance wallet.

Creating Binance API key

First, we need to go to the Binance API Management page as shown in the screenshot below:

Then, we need to fill the key label as directed in the image below:

For security verification, you can use your own credentials:

Then, we will get the key as shown in the screenshot below:

Activate 2FA for secure our bot

In this step, we are going to activate the 2-factor authentication service to secure our bot.

For that, we need to head to the Profile tab as shown in the screenshot below:

Then, we need to enable the 2FA by hitting the ENABLE button:

To enable, it will ask you for your password which you can enter and hit the CONFIRM button:

Here, we must make sure not to forgot to save our recovery code for using Google Authenticator:

Now in order to log in, we will need to perform 2-factor authentication as shown in the screenshot below:

Join Coinmonks Telegram group and learn about crypto trading and investing

Also, Read

How to Add Google Maps in Flutter

0xAirdropfarmer — Fri, 05 Mar 2021 07:48:50 +0000

The Flutter ecosystem is flourishing and will definitely make a huge mark in the near future as one of the most established cross-platform mobile application development frameworks. The community is rapidly growing and there are already many powerful libraries available already. In this tutorial, we are going to make use of the googler_maps_flutter package in order to display maps in our Flutter apps.

Maps are used in applications that deal with navigation and delivery such as Yelp or UberEats, shopping applications, geolocation apps, etc. We can use it to show locations, track locations, real-time navigation, etc. In this tutorial, we are going to use the Google Maps API from the Google Developer Console. The idea is to integrate the Google API key equipped with Android Google map SDK to our Flutter project. Then, we will use the mentioned package to show the map on the app screen. We will also work with markers and their customizations.

So, let’s get started!

Create a New Flutter Project

flutter create googleMapExample

flutter run

After successfully build, we will get the following result in the emulator screen:

Scaffolding the Flutter Project

Now, we need to replace the default template with our own project structure template. First, we need to create a folder called ./screens inside the ./lib folder. Then, inside the ./lib/screens folder, we need to create a new file called Home.dart. Inside the Home.dart, we are going to implement a simple Stateful widget class returning a Scaffold widget with a basic App bar and an empty Container body. The code for Home.dart is shown in the code snippet below:

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Maps"),
        centerTitle: true,
      ),
      body: Container(
        child: Center(
          child: Text("Maps"),
        ),
      ),
    );
  }
}

Now, we need to replace the default template in the main.dart file and call the HomePage screen in the home option of MaterialApp widget as shown in the code snippet below:

import 'package:flutter/material.dart';
import 'package:mapExample/screens/Home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

Hence, we will get the screen as shown in the screenshot below:

Getting The API Key for Google Maps

Now, we need the API key for Google Maps in order to access the map in our application. The process to get the API key is easy. We need to go on and login to Google Developer Console at https://cloud.google.com/maps-platform.

In the developer console, we need to create a project if we don’t have one already, which will lead us to the following screen:

In the above screenshot, we are in the Credentials view of our project. In Credentials, we can create the API key and restrict it for the particular service which in our case is Android Google Maps SDK.

When we click on “+ CREATE CREDENTIALS”, we will get the options as shown in the screenshot below:

From the options, we need to click on “API key”, which will lead us to follow dialog:

The dialog states that the API key is created. It means we have the API key now but the services to be provided by the API key are yet not enabled.

Hence, we will get the API key without any service as shown in the code snippet below:

Since our API key is not restricted to any services, we need to apply some restrictions to it. But before that, we need to ensure that the “ Google Maps Android API v2 “ service is enabled.

Then, we can restrict the API key to Maps SDK for Android by navigating inside API key1 as shown in the screenshot below:

After selecting the service that we require, we need to click on ‘SAVE’ to save the configurations to the API key.

Then, we will get the API key with Google Maps SDK for Android enabled as shown in the screenshot below:

Now, our API key is enabled and ready for use.

Adding the API Key to our Flutter App

In order to add the Android Maps API key to the Flutter project, we need to first go to the AndroidManifest.xml file.

In our AndroidManifest.xml file, we need to add the following code as a child of the application element:

<manifest ...
  <application ...
    <meta-data android:name="com.google.android.geo.API_KEY"
               android:value="YOUR KEY HERE"/>

Here, we need to replace the value in android:value with the API key that we generated in the above steps.

Make sure you use your own API key.

Installing Google Maps Flutter Plugin

Now, we are going to use the package called google_maps_flutter. This plugin provides the GoogleMap widget to be used in our Flutter project to show the map on the screen. The widget houses many properties that allow us to tamper with the displayed map and customize it accordingly.

Now, to install this plugin, we need to add the plugin in our pubspec.yaml file as shown in the code snippet below:

dependencies: 
     google_maps_flutter: ^1.2.0

Adding Maps to The Home Screen

Now, we are going to add the GoogleMap widget to our Home screen to display the map on the screen. For this, we need to initialize the GoogleMapController that handles the loading state of the map. Then, we need to define the CameraPosition that determines which location the map has to show in. In CameraPosition class, we can assign the target value which is latitude and longitude. We can also specify the zoom value which will determine how much the camera is to be zoomed into the map.

Then, we need to use the GoogleMap widget with all the required properties configured as shown in the code snippet below:

class _HomePageState extends State<HomePage> {
  Completer<GoogleMapController> _controller = Completer();

  static final CameraPosition _initialCameraPosition = CameraPosition(
    target: LatLng(37.42796133580664, -122.085749655962),
    zoom: 15,
  );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Maps"),
        centerTitle: true,
      ),
      body: GoogleMap(
        mapType: MapType.normal,
        initialCameraPosition: _initialCameraPosition,
        onMapCreated: (GoogleMapController controller) {
          _controller.complete(controller);
        },
      ),
    );
  }
}

Here, using the mapType option on the GoogleMap widget, we can choose what type of map to show. It can be a satellite image, a roadmap, or a normal map. The onMapCreated event will be created after the map has been placed on the screen. In this event, we can choose to add the map markers which we are going to do later.

The resultant map is shown in the screenshot below:

Adding Map Markers

Now, we are going to add a marker to our map. The markers help us show a specific location on the map. In order to set the markers, we need to initialize a state that holds the markers. Then, we are going to create a function that will be triggered in the onMapCreated event. After the map is created, we will add the markers to the screen. To add markers, we have access to the Marker widget which will take a markerId and position value (latitude and longitude). The markers initialization is provided in the code snippet below:

Set<Marker> _markers = {};

void _onMapCreated (GoogleMapController controller) {
  setState(() {
    _markers.add(
      Marker(
        markerId: MarkerId("id-1"),
        position: LatLng(37.42796133580664, -122.085749655962)
      )
    );
  });
}

Now, we need to set the markers property in GoogleMap widget and also assign the _onMapCreated function in the onMapCreated event as shown in the code snippet below:

body: GoogleMap(
  mapType: MapType.normal,
  initialCameraPosition: _initialCameraPosition,
  onMapCreated: _onMapCreated,
  markers: _markers,
),

Hence, we will get the marker on the map as shown in the screenshot below:

Adding Info to The Map Markers

We can also customize our markers based on our own needs. We can add information to it as well. The information will be shown once we click on the marker on the map. In order to add the marker info, we need to add infoWindow property to the Marker widget. Then, we need to use the InfoWindow widget to add extra information to the marker as shown in the code snippet below:

void _onMapCreated (GoogleMapController controller) {
    setState(() {
      _markers.add(
        Marker(
          markerId: MarkerId("id-1"),
          position: LatLng(37.42796133580664, -122.085749655962),
          infoWindow: InfoWindow(
            title: "GooglePlex"
          )
        )
      );
    });
  }

Now once we click on the marker, we will see the information as shown in the screenshot below:

Not only that, we can add custom icons and other elements to the marker which is pretty easy as well.

Finally, we have successfully integrated Google Maps into our Flutter map project using Google Maps SDK API key from Google Developer Console and google_maps_flutter package.

Conclusion

The main objective of this Flutter tutorial is to explore the integration of Google Maps in the Flutter environment. Google Maps is a powerful geo-navigation service provided by Google which can be integrated into almost any technology nowadays. In this case, we made use of Google API restricted to Android Google Maps SDK to integrate Google Maps into our Flutter project.

Then, in order to show the actual map on the UI of the mobile app, we made use of the latest package available which is google_maps_flutter. The configurations were easy and simple. The map was set up with the help of a simple GoogleMap widget and some basic configurations. In the end, we were also able to add some markers to the map. A lot of other things are possible with this widget which is a challenge for you to explore.

If you found this tutorial on how to add maps to Flutter apps, please consider spreading the word, by sharing the link further. Cheers!

Originally published at https://www.instaflutter.com on March 3, 2021.

How to add Youtube video in React Native

0xAirdropfarmer — Thu, 04 Mar 2021 08:14:18 +0000

Video support is a feature to make your app more lively, more interactive, and more fun. By the end of this article, you will be able to embed any Youtube videos of your choice in React Native apps easily. For you to understand this tutorial you should be familiar with the use of **useRef and** useState in React Native.

To achieve playing Youtube videos in React Native, we will be making use of the npm dependency named **react-native-youtube-iframe. **We will work through using this library by fully integrating it into an app.

Installation

You need to install react-native-webview first. Simply run:

yarn add react-native-webview

or

npm install react-native-webview

then install react-native-youtube-iframe:

yarn add react-native-youtube-iframe

or 

npm install react-native-youtube-iframe

Usage

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {View} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {

  return (
    <View>
      <YoutubePlayer
        height={300}
        play={true}
        videoId={'84WIaK3bl_s'}
      />
    </View>
  );
};

The required props here are **height *and the *videoId **of the Youtube video you intend to play in the React Native app and as seen in the app below, we have a Casey Neistat travel vlog on display:

The play prop is set to true, so let us take it a step further and control play and pause actions:

/**
 * Sample React Native App
 * [https://github.com/facebook/react-native](https://github.com/facebook/react-native)
 *
 * @format
 * @flow strict-local
 */

import React, {useState, useCallback} from 'react';
import {Button, View, Alert} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {
  const [playing, setPlaying] = useState(false);

  const togglePlaying = () => {
    setPlaying((prev) => !prev);
  }

  return (
    <View>
      <YoutubePlayer
        height={300}
        play={playing}
        videoId={'84WIaK3bl_s'}
      />
      <Button title={playing ? 'pause' : 'play'} onPress={togglePlaying} />
    </View>
  );
};

Now we have control to play and pause the Youtube video. It would be nice to add a feature to tell the user that the video is done playing by passing a callback such as the **onChangeState **prop provided by the dependency:

/**
 * Sample React Native App
 * [https://github.com/facebook/react-native](https://github.com/facebook/react-native)
 *
 * @format
 * @flow strict-local
 */

import React, {useState} from 'react';
import {Button, View, Alert} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';

const App = () => {
  const [playing, setPlaying] = useState(false);

  const onStateChange = (state) => {
    if (state === 'ended') {
      setPlaying(false);
      Alert.alert('video has finished playing!');
    }
  }

  const togglePlaying = () => {
    setPlaying((prev) => !prev);
  }

  return (
    <View>
      <YoutubePlayer
        height={300}
        play={playing}
        videoId={'84WIaK3bl_s'}
        onChangeState={onStateChange}
      />
      <Button title={playing ? 'pause' : 'play'} onPress={togglePlaying} />
    </View>
  );
};

Now that we’re done learning the basic usage of this Youtube player dependency, let us go ahead and build complete control for our video player to play, pause, skip, and mute.

import React, {useState, useRef} from 'react';
import {View, Alert, StyleSheet} from 'react-native';
import YoutubePlayer from 'react-native-youtube-iframe';
import {Icon} from 'react-native-elements';

const App = () => {
  const [playing, setPlaying] = useState(false);
  const [isMute, setMute] = useState(false);
  const controlRef = useRef();

  const onStateChange = (state) => {
    if (state === 'ended') {
      setPlaying(false);
      Alert.alert('video has finished playing!');
    }
    if (state !== 'playing') {
      setPlaying(false);
    }
  };

  const togglePlaying = () => {
    setPlaying((prev) => !prev);
  };

  const seekBackAndForth = (control) => {
    console.log('currentTime');
    controlRef.current?.getCurrentTime().then((currentTime) => {
      control === 'forward'
        ? controlRef.current?.seekTo(currentTime + 15, true)
        : controlRef.current?.seekTo(currentTime - 15, true);
    });
  };

  const muteVideo = () => setMute(!isMute);

  const ControlIcon = ({name, onPress}) => (
    <Icon onPress={onPress} name={name} size={40} color="#fff" />
  );

  return (
    <View style={styles.container}>
      <YoutubePlayer
        height={300}
        ref={controlRef}
        play={playing}
        mute={isMute}
        videoId={'84WIaK3bl_s'}
        onChangeState={onStateChange}
      />
      <View style={styles.controlContainer}>
        <ControlIcon
          onPress={() => seekBackAndForth('rewind')}
          name="skip-previous"
        />
        <ControlIcon
          onPress={togglePlaying}
          name={playing ? 'pause' : 'play-arrow'}
        />
        <ControlIcon
          onPress={() => seekBackAndForth('forward')}
          name="skip-next"
        />
      </View>
      <ControlIcon
        onPress={muteVideo}
        name={isMute ? 'volume-up' : 'volume-off'}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'darkblue',
  },
  controlContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around',
  },
});

We have added more custom controls to the original component we already had before and added callbacks to seek forward and backward using the **playerRef *ref. The mute control is basically managed by the *isMute** state but it is worthy of note that the dependency provides a method isMuted (returns a promise that resolves to true if the video is muted, false if not) to determine if the video is muted or not.

Conclusion

Embedding and playing Youtube videos in your React Native app is seamless and a more affordable way of displaying videos in your app, given that Youtube will support the costs of hosting the video itself. The npm dependency we described is really easy to use and is highly customizable as we have seen in the above snippet where we added forward and rewind controls.

Next time you’re looking to add Youtube video support to React Native apps, refer to this tutorial. If you enjoyed the project, please consider sharing the link with your friends and community. Cheers!

originally published on instamobile.io

Generate Haptic Feedback in React Native

0xAirdropfarmer — Fri, 12 Feb 2021 06:29:32 +0000

How to Generate Haptic Feedback in React Native

Perceived performance is critical in mobile apps. We need to make our apps fast and snappy, otherwise, users won’t use them. Adding features like animations and haptic touch feedback makes mobile apps feel more performant. In this article we are going to be talking about Haptic Feedback in React Native — what it is and how can we implement it in mobile apps.

Haptic touch feedback is engineered feedback from applying touch on a game, console or smartphone. You know those vibrations from your favorite video games when your character dies or when the ball strikes the bar in FIFA.

At Instamobile, we use haptics feedback in all of our React Native apps, in order to make the user experience snappy and engaging. Take a look at big apps, such as Facebook, Instagram or Twitter and notice how nice the haptic feedback feels in your hand when you are taking important actions such as likes or follows.

The haptic feedback library we are about to explore in this React Native tutorial is provided by Expo and is called expo-haptics. After exploring the library we will go ahead and build a tiny application to apply what what we have learnt.

Installation

Create a new Expo project

expo init haptic_feedback_example

Install expo-haptics

expo install expo-haptics

Now let us explore the methods and their most likely use case, there are three methods provided by this dependency:

a. Haptics.selectionAsync(): This function takes no argument. This call produces a vibration about 1 second after this function has been triggered. This function can be applied when the animation is done. The animation could be initiated by the user or initiated programmatically.

b. Haptics.notificationAsync(type): This function takes an argument *type *which can be one of the following:

Haptics.NotificationFeedbackType.Success
Haptics.NotificationFeedbackType.Warning
Haptics.NotificationFeedbackType.Error

This function could be applied when giving feedback after validation. Regular users of Snapchat are familiar with this vibration on their phone after scanning a Snapchat QR code.

c. Haptics.impactAsync(style): This function also accepts only one argument which is usually one of three values depending the intensity of the desired feedback:

Haptics.ImpactFeedbackStyle.Light
Haptics.ImpactFeedbackStyle.Medium
Haptics.ImpactFeedbackStyle.Heavy

This function, on invocation, produces a quicker feedback than the selectionAsync and can be used to give instant haptic feedback when a user presses a button. The topping on the cake is that you get to regulate the intensity of the vibration.

Haptic Feedback in React Native

Example 1

We have our React Native project created already so so let’s build a simple project and test the impactAsync method and explore the different haptic feedback styles:

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {StyleSheet, TouchableOpacity, View, Text} from 'react-native';
import * as Haptics from 'expo-haptics';

const HapticFeedbackExample = () => {
  function impactAsync(style) {
    switch (style) {
      case 'light':
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
        break;
      case 'medium':
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
        break;
      default:
        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
        break;
    }
  }

  return (
    <View>
      <TouchableOpacity onPress={() => impactAsync('light')}>
        <Text style={styles.light}>Light</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => impactAsync('medium')}>
        <Text style={styles.medium}>Medium</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => impactAsync('heavy')}>
        <Text style={styles.heavy}>Heavy</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  light: {
    color: '#ffffff',
    fontSize: 20,
    width: 300,
    height: 100,
    backgroundColor: 'green',
    marginVertical: 10,
  },
  medium: {
    color: '#ffffff',
    fontSize: 20,
    width: 300,
    height: 100,
    backgroundColor: 'orange',
    marginVertical: 10,
  },
  heavy: {
    color: '#ffffff',
    fontSize: 20,
    width: 300,
    height: 100,
    backgroundColor: 'red',
    marginVertical: 10,
  },
});

What are we doing in the React Native codebase above?

We create three buttons to represent the three styles of impactAsync. We have this simple screenshot showing the different buttons with their several styles and intensities:

Run the project and start tapping the three buttons alternatively. On close observation you’ll notice the slight differences in intensities ranging from light to medium to heavy.

Example 2

Let us build a small QR scanner to verify if a resolved QR code is a valid URL.

For this, we have to add *expo-barcode-scanner *provided by Expo.

expo install expo-barcode-scanner

Let us write up code to scan a random barcode and verify if it’s a valid URL:

import React, {useState, useEffect} from 'react';
import {Text, View, StyleSheet, Button, Alert} from 'react-native';
import {BarCodeScanner} from 'expo-barcode-scanner';
import * as Haptics from 'expo-haptics';

export default function App() {
  const [isPermitted, setPermitted] = useState(null);
  const [scanned, setScanned] = useState(false);

  useEffect(() => {
    (async () => {
      const {status} = await BarCodeScanner.requestPermissionsAsync();
      setPermitted(status === 'granted');
    })();
  }, []);

  const handleBarCodeScanned = ({type, data}) => {
    setScanned(true);
    is_url(data);
  };

  function is_url(str) {
    const regexp = /^(?:(?:https?|ftp):\/\/)?(?:(?!(?:10|127)(?:\.\d{1,3}){3})(?!(?:169\.254|192\.168)(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)(?:\.(?:[a-z\u00a1-\uffff0-9]-*)*[a-z\u00a1-\uffff0-9]+)*(?:\.(?:[a-z\u00a1-\uffff]{2,})))(?::\d{2,5})?(?:\/\S*)?$/;
    hapticNotify(regexp.test(str));
  }

  const hapticNotify = (success) => {
    switch (success) {
      case true:
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
        Alert.alert('Success', 'This is a URL');
        break;
      default:
        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
        Alert.alert('Error', 'This is not a URL!!');
        break;
    }
  };

  if (isPermitted === null) {
    return <Text>Requesting for camera permission</Text>;
  }
  if (isPermitted === false) {
    return <Text>No access to camera</Text>;
  }

  return (
    <View style={styles.container}>
      <BarCodeScanner
        onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
        style={StyleSheet.absoluteFillObject}
      />
      {scanned && (
        <Button title={'Tap to Scan Again'} onPress={() => setScanned(false)} />
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

What are we doing in the above codebase?

We have to ask for permission first before we go ahead to scan a barcode and then validate the result of the scan to verify whether it’s a URL:

We apply different haptic feedback styles based on whether the scanned barcode URL is valid or not. You would notice the difference in the haptic feedback between scanning a valid URL barcode and an invalid URL barcode.

Conclusion on Haptic Feedback in React Native

We have gone through the **expo-haptics **library and its possible use-cases. We went ahead to apply what we’ve learnt by building a couple of small apps to apply these use cases and get a practical feeling of how these interactions behave.

Adding haptic feedback in React Native apps is pretty straightforward, given that there are libraries out there that can make this task trivial. However, you need to choose carefully when to trigger these haptic feedback interactions, in order to provide a high-quality mobile app. Abusing these vibrations will piss off your users and it will also drain their phone battery pretty quickly, so choose wisely.

For more ideas on mobile performance, check out our article on how to boost performance in mobile apps.

Originally published at https://www.instamobile.io on February 10, 2021.

5 Cools Flutter Instagram templates 2021

0xAirdropfarmer — Wed, 13 Jan 2021 04:25:23 +0000

Instagram is a popular social sharing app as we know it. As of 2020, there are 1 billion monthly active Instagram users. Facebook acquired Instagram in 2012. Since then, it has generated four times more interaction than Facebook itself. Now, you can gauge how popular and extensively used this app is in the present world. Now, using the app is one thing, and building such an app is completely another. Building such a highly powerful social media app with high-end UI and functionalities is not an easy job. It takes years, expert developers, costly resources to build these kinds of social sharing apps. But, the thing that takes a bit of pressure of developing is the availability of app templates.

Just as Instagram has been a top app in recent times, the Flutter app development framework is also growing as one of the leading mobile application development frameworks. Known for providing pixel-perfect UI implementations, Flutter is one of the most used frameworks for developing mobile applications as of 2020. In this article, we are going to combine these two hot topics Flutter and Instagram and talk about Instagram clone templates built using Flutter/Dart coding. This article will introduce you to the five best Flutter Instagram clone app template out there in the market which offers beautiful UI design and features close to that of the original app. The list includes both premium tier and open-source Flutter Instagram clone templates.

Flutter Instagram Clone

If you are looking for a fully functional Instagram clone with state of an art user interface and features resembling the original app then this is it. One of the best Instagram clone app available in the market fully coded in the Flutter ecosystem. Hence, the template can be used to build for both Android and iOS. This template offers 60+ screens that are modern and intuitive in close resemblance to the original app. The highlight feature includes 20+ Instagram filters, Ephemeral stories, post feeds, social features such as likes and comments, social graphs, and a real-time chatting interface with photo and video messages.

Not to mention, all the basic features of the original Instagram app are also available. Of course, the app is integrated with innate features such as push notifications, dark mode theme, and localizations. The performance improvement by Image caching, Smooth loading states, Animations, Empty states, Video compression, and Image optimizations. The backend technology involves Firebase features and services. Most importantly, there is support for life-long updates as well. Hence, this Flutter Instagram Clone is a full package that offers everything there is to for your next Instagram clone app. The template is offered by instaflutter.com one of the leading portals when it comes to state-of-the-art mobile app templates.

Snapta instagram clone app

Snapta is another Instagram app built using Flutter and dart with Firebase backend services. The template is available in the Codecanyon marketplace. The app offers a similar UI experience and features compared to the original app. All the basic features such as Post Feeds, Filter effects, Push Notification, Real-time chat, Profile interface are available in this app. This app can be considered as a light-weight alternative to the original Instagram app. The social activity features such as like and comments are available. Users can have real-time conversations and upload images with different filters and camera options to edit the images. However, some of the heavy-weight features such as stories, video stories, etc are not built-in. Hence, this app can be a low-cost and lightweight alternative to the original app as well as other Flutter Instagram clone app. You can create a basic Instagram like app using this template as well as take it as inspiration in the field of Flutter application development.

PicShare — Instagram like self-hosted social media application

Another Instagram-like social media app that has a high resemblance to the original app. The key technology used to build this template is Flutter/Dart, PHP/Laravel, and PostgreSQL. The template offers an easy image upload feature that can support the image carousel up to 16 images. The application consists of 20 screens and 30+ API endpoints. All the basic features such as follow, likes, comments, share, comment history, post history, timeline, search, activity, profile activity, and user management are included in this package. The integration of S3 compatible file storage, self-hosted CDN, built on popular app development, and backend frameworks makes this app template a high-end product. It also offers coding documentation. The push notification is integrated with help of Firebase push notifications. The UI designs look modern and intuitive; similar to that of the original app. Just like the previous one the heavy-weight feature of adding multi-optional stories is missing in this template as well. Overall, a great template to start developing your next Instagram like the app.

fluttergram

The lightweight implementation of an Instagram-like app that offers a fully-functional app with great UI build coded entirely using Flutter/Dart. The backend integration includes Firebase services with Firestore. The template is open-source and available freely on GitHub. Fluttergram offers a basic Home Screen feed just like in the original Instagram app with exception of the stories feature. Users can like and comment on the post. The camera feature has a minimal option with no filters. You can just upload the image, keep the status, and share it as a post. The profile screen UI with its settings option has a similar UI to the original app. There is no integration of video upload or posting in this template.

The overall app is built using the popular Flutter packages available in the market. If not the best template to build your next Instagram clone like the app, it can be the source of inspiration for the Flutter developers. We can learn a lot from the Flutter UI build, coding structure, and plugins used in implementing this template. This can a great way to start off your next flutter project if you are looking for building an Instagram social platform.

Instagram Clone built using Flutter and Firebase

Social Share is another open-source Instagram-like app template built entirely on Flutter/Dart ecosystem. The features offered are minimal compared to other premium app templates but it definitely packs a punch when it comes to UI and some backend Firebase services integration. The UI and features it has in the offer are pretty basic. The Google sign-in is integrated for user authentication and login and Firebase and Firestore for CRUD functionality. The basic features such as follow, likes, comments, search users, image posting are integrated. One major feature is the image compression while uploading which improves the performance check of the app. The template is under development as well as more features are to be added in the near future. The important thing is that the template is open-source and free to download and use. It is a great resource for the new Flutter developers. This template can inspire and provide vital information on building social apps in the Flutter ecosystem.

Conclusion

Well, among the five best Flutter Instagram clone templates in the list above, some have high-end heavyweight features, and some house only the basic features. Some are premium templates and some are open-source. But things in common between them is they are all built entirely using the Flutter framework. They can all be developed into the next social sharing app like a flutter and can be also taken as a source of inspiration. Among the five, the one provided by instaflutter.com packs the most powerful and complex features. The template provided by it can be developed in the actual full-fledged app. However, other templates will need a bit of work before dedicating themselves as the complete app.

I hope, this article helps you choose the best Flutter Instagram clone app template available in the market. Nonetheless, there is plenty of inspiration for Flutter developers inside these clone app templates.

Keep in mind that we may receive commissions when you click our links and make purchases. However, this does not impact our reviews and comparisons. We try our best to keep things fair and balanced, in order to help you make the best choice for you.

How to Add Preloader to Image in Flutter

0xAirdropfarmer — Thu, 24 Dec 2020 13:05:24 +0000

Flutter is a cross-platform mobile application development framework that offers a widget-based mechanism to implement the pixel-perfect UI. Creating a state of the art apps with beautiful UI is a challenge for every mobile app developer. And, Flutter has made it easier and simple. However, with great UI comes the value of user experience as well. It is necessary to have a sustainable user experience along with a great UI. Hence, this tutorial will help learn a small aspect of optimizing the user experience by showing the loading effect (termed as pre-loaders, placeholders) before the actual data loads.

The preloaders become necessary for the user to experience the data is still loading or being fetched from the server. Until the actual data is fetched from the server and displayed on the screen, the pre-loaders will help users understand what actually is going on. The displaying of preloaders indicates that the actual data has still not loaded due to some reasons such as slow network, app errors, etc. Thus, optimizing the overall user experience. Hence, the pre-loaders are necessary for any mobile applications as well as websites. And here, we are going to learn just that on how to add image pre-loaders before the actual image loads in a Flutter app.

Create new Flutter project

First, we need to create a new Flutter project. For that, make sure that the Flutter SDK and other flutter app development related requirements are properly installed. If everything is properly set up, then in order to create a project, we can simply run the following command in the desired local directory:

flutter create imagePreloader

flutter run

After successfully build, we will get the following result on the emulator screen:

Creating Home Screen

Since we have our flutter app up and running in the emulator, we can now move to create screens. For that, we need to create a directory called ./screens inside the ./lib directory of our project. Inside the ./screens directory, we need to create a new dart file called Home.dart.

In the Home.dart, we are going to create a stateful widget to show the image as well as the preloaders. But first, we are going to show a simple App bar by returning a Scaffold widget as shown in the code snippet below:

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'dart:ui';

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<HomePage> {

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
            backgroundColor: Colors.white,
            centerTitle: true,
            title: Text(
              "Image",
              style: TextStyle(color: Colors.black87, fontFamily: 'Overpass', fontSize: 20),
            ),
            elevation: 0.0
        ),
        backgroundColor: Colors.white,
        body: Container()
    );
  }
}

Here, we have added an App bar using AppBar widget in the Scaffold widget. The body property returns an empty Container widget.

Now, we need to import the Home.dart file in main.dart and replace the default widget with HomePage widget as shown in the code snippet below:

import 'package:flutter/material.dart';
import 'package:imagePreloader/screens/Home.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

Hence, we will get the result as shown in the screenshot below:

Adding Image Container to Home Screen

Now, we are going to display an image on the Home screen. For that, we need to fetch a mock image from pexels or from anywhere. Then, we need to add the URL path of the image to a List called imagesPath.

Note that, we can directly use this URL but we are pushing the URL from imagesPath to a new List called imagesList because we want to show the Pre-loaders before the image loads on the screen.

The initializations are provided in the code snippet below:

List imagesPath = [
    "https://images.pexels.com/photos/2440061/pexels-photo-2440061.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940",
  ];

 List imagesList = new List();

Now, we need to create a function to load the image URL from the imagesPath list to imagesList list. Remember that we are doing this as an alternative to fetching images from the server. Since we are not using a server to fetch the image, we have to devise the logic to load the image URL manually from the code itself.

The implementation of getImages function is provided in the code snippet below:

getImages() {
  imagesList.add(imagesPath[0]);
}

Now, we need to call the getImages function inside the initState method:

@override
void initState() {
  super.initState();
  getImages();
}

This initState method executes before our main build function executes once we enter the Home screen.

Now, we are going to create a image view container in the Scaffold widget body. For that, we can use the code from the following code snippet:

body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
          child: Container(
            margin: EdgeInsets.only(right : 0),
            width: 500,
            height: 350,
            decoration: BoxDecoration(
              color: Colors.black26,
              borderRadius: BorderRadius.circular(16),
            ),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.network(
                  imagesList[0],
                  fit: BoxFit.cover,
              ),
            ),
          )
        )
      ),
    );

Here, we have placed the SingleChildScrollView widget as a primary parent widget so that the whole body section is scrollable. Then, we have a Padding widget to apply some paddings which have Container as a child widget. The Container widget is configured with some unique properties which provide child widgets as a ClipRRect widget. The ChipRRect allows us to clip the edges of its child widget. As its child widget, we have used Image.network widget to display the image.

The result is displayed in the screenshot below:

Here, we have got an image on the screen. Now, it is time to add Pre-loaders.

Adding Shimmering Image Pre-loader

In order to add the image Pre-loader, we are going to make use of the shimmer package. This package provides an easy way to apply the shimmer effect in the Flutter app. It makes the Pre-loader implementation easy as well as optimizes the user experience.

First, we need to install the shimmer package. For that, we need to add the shimmer package to pubspec.yaml file as shown in the code snippet below:

dependencies:
  flutter:
    sdk: flutter

  shimmer: 1.1.1

Now, we need to import the package to the Home.dart as shown in the code snippet below:

import 'package:shimmer/shimmer.dart';

Now, we are going to implement the shimmer preloading effect using the Shimmer widget provided by the shimmer package. But first, we need to make some configurations so as to show the shimmers perfectly. So, we need to define some constants as shown in the code snippet below:

bool _loading = false;
int offset = 0;
int time = 800;

Here, the _loading Boolean variable is for the conditional rendering of the Image and Pre-loaders. The offset and time value is configured to the Shimmer widget to set the time interval till which the pre-loaders need to load. The implementation is provided in the code snippet below:

body: (_loading)?
        Container(
          color: Colors.white,
          child: SafeArea(
            child: ListView.builder(
              padding: EdgeInsets.all(5),
              itemCount: 2,
              itemBuilder: (BuildContext context, int index) {
                offset += 5;
                time = 800 + offset;
                return Padding(
                  padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                  child: Shimmer.fromColors(
                    highlightColor: Colors.white,
                    baseColor: Colors.grey[500],
                    child: Container(
                      margin: EdgeInsets.only(right : 0),
                      height: 350,
                      width: 270,
                      decoration: BoxDecoration(
                        color: Colors.black26,
                        borderRadius: BorderRadius.circular(16),
                      ),
                    ),
                    period: Duration(milliseconds: time),
                  )
                );
              },
            ),
          )
        ):
         SingleChildScrollView(
          child: Padding(
            padding: EdgeInsets.symmetric(horizontal: 5, vertical: 5),
            child: Container(
              margin: EdgeInsets.only(right : 0),
              width: 500,
              height: 350,
              decoration: BoxDecoration(
                color: Colors.black26,
                borderRadius: BorderRadius.circular(16),
              ),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16),
                child: Image.network(
                    imagesList[0],
                    fit: BoxFit.cover,
                ),
              ),
            )
          )
        ),
    );

Here, we show the Pre-loader template in contrast to the Image template using the _loading value as conditional rendering. We have used the Shimmer widget inside the ListView so as to show multiple loaders which can be controlled by setting the itemCount property. We have used the fromColors extension provided by the Shimmer widget with configured highlightColor and baseColor properties. We have placed a Container widget similar to Container in Image template as a child of Shimmer in order to display the shimmering effect.

Now, the above template will create a shimmering pre-loader effect. But, we still need to implement the logic to show the pre-loaders. For that, we are going to use the Timer function. The Timer function will help to delay the loading of the image onto the screen and show the pre-loaders until then. First, we need to import the package that provides the Timer function:

import 'dart:async';

Now in getImages function, we use the Timer to delay the loading of the image and show the shimmer pre-loaders instead.

In an actual app, we fetch the data from server in which the fetching may take time. Till then, we show some loading effect which improves the overall user experience.

Since we are not pulling data from the server, we need to manually configure the delay. Hence, the implementation is provided in the code snippet below:

getImages() {
    setState(() {
      _loading = true;
    });
    Timer(Duration(seconds: 5), () => {
      imagesList.add(imagesPath[0]),
      setState(() {
        _loading = false;
      })
    });
  }

Now, the final result with shimmering effect Pre-loaders is shown in the demo below:

We can notice a shimmering loading effect just before the image loads on the screen. Likewise, we can display the shimmer effect from any widget element structure of the screens as the child of the Shimmer widget uses the Flutter widgets itself. Hence, it is flexible enough to be shaped into anything.

Finally, we have implemented the image Pre-loader in a Flutter app.

Conclusion

As we talk about the importance of pre-loaders in optimizing the user experience, we can see the effect it has on the overall app UI and its usage from the demo above. It makes the overall user experience convenient. These types of pre-loaders are used in every app nowadays. So, users expect pre-loaders to happen. It creates a greater impact in terms of visual and understanding of what is going on. Pre-loaders taking a long time can interpret into problems in internet connectivity or some other type of app errors. This makes the user aware of what actually is happening. Hence, it is an important element to have knowledge of for a developer.

Now, the challenge is to create the preloaders for different widget elements. Here, we implemented the preloaders for the image element which was simple. But, the pre-loaders using the shimmer package can be shaped into anything as it uses the Flutter widgets itself as a child.

For more inspirations for beautifully designed pre-loaders, check out some amazing Flutter apps that have them integrated intuitively.

daily.dev delivers the best programming news every new tab. We will rank hundreds of qualified sources for you so that you can hack the future.

4 Top Static Site Generators for Vue.js

0xAirdropfarmer — Mon, 30 Nov 2020 16:29:05 +0000

Your project may not need a micro-service or a serverless API. In fact, it’s far more likely that all you really need is a simple, scalable, and performant static site generator. Rather than using heavy, bloated frameworks like WordPress or Drupal, a static site generator lets you write your content as static HTML files and handle dynamic components (variables, content blocks, etc.) separately. You can also get out of the web dev game and move onto more important things.

In this post, I’ve compiled a list of the most popular options for Vue static site generation along with a comprehensive comparison — all in one place.

Nuxt.js

Nuxt.js is a framework built with Vue.js that helps to create application architecture for web applications and features a flexible hands-off development style.

Nuxt.js is highly configurable and flexible, but it is not a fully proven solution for static site generation. The framework is not able to be used by itself on one project.
Pros

Nuxt.js is very simple to get started with. It is easy to learn and get started with. To use the framework, you have to install vue-cli and execute vue init nuxt/starter <project-name>. In general, installation takes around 5 minutes to complete.
Nuxt.js can be easily extended, and plugins can be ported easily. Cons
Nuxt.js is not production-ready — although it has been in development for over a year.
As an immature framework, it has the chance to change with each update, with the potential risk of breaking client apps.
As it is a Vue.js extension, developers are beholden to the core Vue developers.
Nuxt.js is not framework independent.

VuePress

VuePress is a static site generator based on Vue.js.
VuePress compiles your project folder right to the build directory. It does not use any third-party code and stays very small.
Pro

VuePress is very easy to use and takes minimum configurations. Because of this reason, it can be used to create a simple personal blog without the need to look for third-party plugins. Con
It is a minimal static site generator. As a result, things like the featured image and header logo are not supported.
VuePress does not provide any options in its framework to build a solid landing page.

Gridsome

Gridsome is a development tool that can compile static sites from different file formats featuring an online catalog and live automatic compilation. Gridsome is an open-source project and its most notable features include a built-in marketplace and the ability to support content and content-related features in a variety of markup languages and frameworks.
Pro

Gridsome is built on top of React, which comes with an excellent developer community.
Gridsome is a fully-functional framework that can be extended.

Con

Gridsome is not developed by Vue or Nuxt.js and therefore, it is hard to say it is “native” to Vue.
Gridsome isn’t a complete Vue.

Saber

Saber is based on the Gatsby framework, a static site generator that was created with React.
Saber can be used as a standalone site generator as a Gatsby plugin. Gatsby’s main features include:

This list has been created based on the popularity and community, but it's important to re-emphasize that the popularity is largely arbitrary.
Pros

Saber has a great ecosystem of packages.
Saber has a simple installation process.
Saber has a vast range of options in addition to the core features such as blog posts.
Saber offers solid development tools.
If you run into trouble, the community is large and responds quickly. Cons
Saber is hard to get started with.
Saber lacks a good landing page generator.

Conclusion

You can try Vuepress, Gridsome, Nuxt and Saber if you want to start with a static site generator. Nuxt.js and Gridsome are popular for small sites. VuePress is more suitable for big projects. Saber is great for creating Gatsby project templates. Choose saber for quickly generating a template that uses Gatsby.

The Best Web Design Books for HTML, CSS, and UI Interfaces in 2021

0xAirdropfarmer — Thu, 26 Nov 2020 02:00:25 +0000

If you are starting your web development or design journey, you need to have solid knowledge of HTML and CSS.

In order to make your mark on a world that’s already full of impeccable design layouts and UI interfaces, you’ll need a good grasp of styling basics. You’ll have to go to the depths of the design pit and return to the top with well-polished skills.

Now, in order to help you hone your skills and become an expert, I have listed here some of the greatest books available on the market that I have read. These books deal with CSS and Web design knowledge from the ground up.

They will not only teach you about design specifications but will also help you develop the vision to devise your own state of the art designs. Let’s look at them now.

CSS in Depth

Web developers must understand at least the basics of HTML and CSS. If you want to become an expert web developer, you’ve gotta know them through and through.

Well, this book helps you learn the styling part of web development that is CSS. It offers in-depth and structured ways to use CSS to style your HTML elements.

As I began reading this book, I discovered that it’s packed with creative examples and best practices of using CSS that will definitely sharpen your technical skills and inspire your sense of design.

With state of the art examples and exercises, this book will definitely hon your CSS skills and take it to the next level. From the basics of design to advanced CSS design concepts, you will experience it all in your path to master the nooks and corners of CSS. The objective of this book is to make you a better web designer and make your web apps look spectacular.

Enduring CSS

The main objective of this book titled “Enduring CSS” is to make the web developers write the CSS style codes which are durable over a long period of time. It is a guide to writing style sheets for large scale, rapidly changing, long-lived web projects. It taught me how to individualize the styles so that those CSS modules become simpler to transport into different contexts and projects. It imparts knowledge on CSS tools such as PostCSS and linting tools to study and maintain the CSS code base across the large project.

This book also specifies how to handle states more accessibly with ARIA attributes as opposed to class changes. There is much more in-depth knowledge to explore in this book.

CSS Refactoring

This book or a chapter of the book is mainly based on refactoring and scaling of the CSS codes. It imparts knowledge on what actually refactoring means and its relation to software architecture. According to the book “Refactoring is the process of rewriting code in order to make it more simple and reusable without changing it’s behavior “. Now, we know that CSS styles can be made re-usable as well by making an external stylesheet.

This book aims to help us re-write the design elements and attributes that are modular and scalable at the same time without changing their overall functions. It introduced me to best practices, examples, concepts of refactoring the CSS code and also performs a unit test on them. Overall, the book provides ample knowledge on how CSS works and how refactoring it will make the code more efficient, and scalable in the long run.

Atomic Design

The Atomic Design book written by Brad Frost introduces techniques for designing our UIs as thoughtful hierarchies. This book also discusses the qualities of effective pattern libraries along with methods to transform the team’s design and development workflow. As a design concern, this Atomic design concept provided in this book divides the design components into different levels such as atoms, molecules, organisms, templates, and pages. They basically help to understand the singular most unit of designing called atom which when structured properly becomes a molecule.

Molecular designs with the correct pattern of combination become an organism. The organisms placed accurately with proper design patterns from templates that we apply to pages. Hence, learning designs from this book is basically like learning chemistry where design elements are the chemicals. It is indeed an interesting book to read.

CSS Secrets

HTML & CSS (also jQuery one)

This book is a full-fledge learning ground from HTML, CSS, and JavaScript including jQuery as well. It is an all-in-one book that offers a detailed understanding, concepts, practical examples, and best practices of HTML5, CSS3 including jQuery. At the end of the day, you will be able to design your own webpages and get them online in an instant. The lessons are straightforward with a step-by-step guide building upon the design concept from the ground up.

The main highlights are the stepwise instructions on most common web development tasks, practical examples of the applications of design patterns, and exercises to help you test your knowledge building up to the course. Overall, a well-equipped book to make you an expert in the field of web design and development.

GET READY FOR CSS GRID LAYOUT

Well, the grid layouts were an important addition to design specifications. They made the positioning of the elements on the webpage easier. The webpage could be segmented into different grid areas where each grid areas have their own set of design elements. The grid areas could be positioned anywhere necessary to give an intuitive look to the overall UI. Now, if you want to dive deep into the pits of grid layout then this book by Rachel Andrew definitely does the job for you.

With learning content from this book, you can get up to speed with Level 2 of the grid layout and dig into working examples you can experiment with right away. You will be able to harness the power and potential of sub-grid, which makes lining nested grid items with the main grid simple and easy.

CSS: The Definitive Guide: Visual Presentation for the Web

This book is for web designers that follow sophisticated page styling and improved accessibility which saves tons of time and effort. The latest edition of the guide lets you into the latest design and CSS specifications. This book lets you into the broader aspect of design implementations where you will focus on user experience, speed development, avoid potential bugs, etc.

Experiencing the depth of knowledge in this book, you will be able to add depth of awesome design elements to your applications through layout, transitions and animations, borders, backgrounds, text properties, and many other tools and techniques. This awesome guide for upgrading your web design skill is a must-read.

CSS3 FOR WEB DESIGNERS

If you look to transition from normal CSS specifications to CSS3 then, this book will definitely help you become an expert on it. CSS3 opens up a world of possibilities in the design world with the introduction of advanced selectors to generated content to web fonts, gradients, shadows, rounded corners with elegant animations as well. In the latest edition of this book by Dan Cederholm, new techniques and properties for micro-layouts are introduced.

With a wide range of browser support of CSS3 styles, you can polish your skill and test it out in any design environment to create beautiful and well-crafted design layouts.

Conclusion

You may as well learn from the online tutorials, video tutorials, and all as they are the quick guide to the design solution you are looking for. But here, we are not only looking for design solutions. We are in search of skilled designers who can envision their own set of designs that mesmerizes the web community. We need those who can transform their imaginations into web layouts.

In order to have the expertise, one must travel to depths of CSS styling pits learning from the best practices, techniques, and challenging them with every possible criterion for design there is. Hence, these books available will help you do exactly that. Enlighten yourself with the best books on web designing to take your designing career to new heights.

Learning standard CSS styling mechanisms is essential for any web developer. If you are looking to embark on the journey to become an expert web developer, you can check out some of the standard and full-fledged web development tutorials. Get yourself familiar with web dev ethics and different JavaScript frameworks.

The post The Best Web Design Books for HTML, CSS, and UI Interfaces in 2021 appeared first on Kriss.