DEV Community: Shivansh Agrawal

Use props and also fetch Data from an API in Next.js with Typescript

Shivansh Agrawal — Sun, 03 Sep 2023 16:35:24 +0000

First, we will create a Next.js app.

You can see the response of the API by browsing https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail this link in the browser. Since we can use get request apis in the browser. to view JSON beautifully we can use JSON Viewer Pro extension.

In app/Page.tsx which displays as the First screen with path name ‘/’

To get Data from an API we will use the fetchdetails() function.

async function fetchdetails() {
  const response = await fetch(
    "https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail"
  );
  if (response.ok) {
    const responseBody = await response.json();
    // console.log(`data ${data}`);
    // setData(responseBody);
    console.log(`data ${responseBody}`);
    return responseBody;
  }
}

This fetch details will return response.json() if the response.ok.

Then in the primary function of Page.tsx we will call this function like this :

const data = await fetchdetails();

Props are basically used to pass data from one function to another function.

To use Props with type script. First, make an interface of data that has to pass. In my case, the interface looks like this

interface Props {
    key: String;
    strDrink: String;
    strDrinkThumb: String;
    idDrink: String;
  }

To display data. We will create a container with an image and text to display the image and the name of the cocktail coming from the API.

Create a Components Folder in your dir and make a CocktailContainer.tsx file inside it.

// import Link from "next/link";
import Image from "next/image";
interface Props {
  strDrink: String;
  strDrinkThumb: String;
  idDrink: String;
}

export default function CocktailContainer({
  strDrink,
  strDrinkThumb,
  idDrink,
}: Props) {
  return (
    <div>
      <h1>{strDrink}</h1>
      <Image src={strDrinkThumb + ""} alt="" width={150} height={150} />
      {/* <Link href={`/asd`}></Link> */}
    </div>
  );
}

Now coming back to page.tsx file we pass data from the api to the above function to display the data.

return (
    <main className="font-poppins mx-10">
      <div className="grid gap-10 grid-cols-fluid"></div>
      {data.drinks.map(function (item: Props) {
        return (
          <CocktailContainer
            key={item.idDrink.toString()}
            strDrink={item.strDrink}
            strDrinkThumb={item.strDrinkThumb}
            idDrink={item.idDrink}
          ></CocktailContainer>
        );
      })}
    </main>

The above code uses the map to pass or display any Object or list.
The Whole code page.tsx will look like this

import Image from "next/image";
import CocktailContainer from "@/components/cocktailContainer";
async function fetchdetails() {
  const response = await fetch(
    "https://www.thecocktaildb.com/api/json/v1/1/filter.php?c=Cocktail"
  );
  if (response.ok) {
    const responseBody = await response.json();
    // console.log(`data ${data}`);
    // setData(responseBody);
    console.log(`data ${responseBody}`);
    return responseBody;
  }
}
// eslint-disable-next-line @next/next/no-async-client-component
export default async function Home() {
  const data = await fetchdetails();

  interface Props {
    key: String;
    strDrink: String;
    strDrinkThumb: String;
    idDrink: String;
  }

  return (
    <main className="font-poppins mx-10">
      <div className=""></div>
      {data.drinks.map(function (item: Props) {
        return (
          <CocktailContainer
            key={item.idDrink.toString()}
            strDrink={item.strDrink}
            strDrinkThumb={item.strDrinkThumb}
            idDrink={item.idDrink}
          ></CocktailContainer>
        );
      })}
    </main>
  );
}

Since to use external image domains, we first configure them.

So, to do so replace this code in your next.config.js file.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
  images: {
    domains: ["www.thecocktaildb.com"],
  },
};

module.exports = nextConfig;

Now after running your app, you would be seeing a list of cocktails.

Live Location Tracking in Google Maps Flutter using Geolocator in 2023

Shivansh Agrawal — Sun, 03 Sep 2023 05:36:00 +0000

The packages we need this feature are

google_maps_flutter | Flutter Package

A Flutter plugin for integrating Google Maps in iOS and Android applications.

pub.dev

geolocator | Flutter Package

Geolocation plugin for Flutter. This plugin provides a cross-platform (iOS, Android) API for generic location (GPS etc.) functions.

pub.dev

For configuring Google Maps in Flutter we first need to set this property

 android {
     defaultConfig {
         minSdkVersion 20
     }
 }

and then Specify your API key in the application manifest android/app/src/main/AndroidManifest.xml:

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

Get an API key at https://cloud.google.com/maps-platform/.
Now the real feature implementation start

First, initialize a variable of LatLng type like and a Googlemap controller to animate camera position as location changes

LatLng? location;
 GoogleMapController? mapController;

Then To get the User’s current live location continuously We will use the geolocator package

Add a foreground permission for location in android/app/src/main/AndroidManifest.xml:

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

StreamSubscription? positionStream;
  void getUserLocation() async {
    LocationPermission permission;
    LocationSettings locationSettings;
    await Geolocator.getCurrentPosition(desiredAccuracy: LocationAccuracy.high)
        .then((Position position) async {
      location = LatLng(position.latitude, position.longitude);

      setState(() {});
    });

    permission = await Geolocator.requestPermission();
    if (defaultTargetPlatform == TargetPlatform.android) {
      locationSettings = AndroidSettings(
        accuracy: LocationAccuracy.high,
        forceLocationManager: true,
      );
    } else if (defaultTargetPlatform == TargetPlatform.iOS ||
        defaultTargetPlatform == TargetPlatform.macOS) {
      locationSettings = AppleSettings(
        accuracy: LocationAccuracy.high,
        activityType: ActivityType.fitness,
        distanceFilter: 100,
        pauseLocationUpdatesAutomatically: true,
        // Only set to true if our app will be started up in the background.
        showBackgroundLocationIndicator: false,
      );
    } else {
      locationSettings = const LocationSettings(
        accuracy: LocationAccuracy.high,
        distanceFilter: 100,
      );
    }

    positionStream =
        Geolocator.getPositionStream(locationSettings: locationSettings)
            .listen((Position? position) {
      location = LatLng(position!.latitude, position.longitude);
      mapController!.animateCamera(
        CameraUpdate.newCameraPosition(
          CameraPosition(
            target: LatLng(position.latitude, position.longitude),
            zoom: 14.0,
          ),
        ),
      );
      setState(() {});

    });
  }

Call this function in the intstate of your widget class.

@override
  void initState() {
    super.initState();
    getUserLocation();
    // _getCurrentLocation();
  }

and in dispose call cancel this live tracking

@override
  void dispose() {
    positionStream!.cancel();

    // TODO: implement dispose
    super.dispose();
  }

A marker will indicate user live location in Google Map like this

GoogleMap(
          markers: {
            Marker(
                markerId: const MarkerId('Live Location'),
                position: location ?? const LatLng(0, 0))
          },
       initialCameraPosition:  const CameraPosition(target: LatLng(0.0, 0.0)),
          // myLocationEnabled: true,
          // myLocationButtonEnabled: false,
          // mapType: MapType.normal,
          // zoomGesturesEnabled: true,
          // zoomControlsEnabled: false,
          // polylines: Set<Polyline>.of(polylines.values),
          onMapCreated: (GoogleMapController controller) {
            mapController = controller;
          },
        ),

For testing, I use the Lockito app from the Play Store

App should work like this in the video

https://youtube.com/shorts/RocbFph9QEg?feature=share

Modify Status Bar in Flutter Apps in 2023

Shivansh Agrawal — Mon, 21 Aug 2023 17:08:07 +0000

If u want to have your Status bar look like this
Add this in your Scaffold

appBar: AppBar(
          systemOverlayStyle: SystemUiOverlayStyle(
            systemStatusBarContrastEnforced: false,
            statusBarColor:
                Colors.transparent ,
            statusBarIconBrightness: Brightness.dark,
            statusBarBrightness: Brightness.light,
          ),
          elevation: 0,
          toolbarHeight: 0,
        ),

You can modify this as per your needs

You will notice that you have to swipe the status Bar once to see your changes.

To prevent this Add this Code in your First screen initState

  SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual,
        overlays: SystemUiOverlay.values);