DEV Community: Debugger 333

Adding google maps to flutter app

Debugger 333 — Tue, 21 Jul 2020 09:06:39 +0000

* Note: All the code discussed in this blog can only work on a android emulator or realtime android device

Setup

The first step is to add the Google Maps Flutter plugin as a dependency in the pubspec.yaml file.

  dependencies:
    ...
  google_maps_flutter: ^0.4.0

The next step is getting an API key for both Android and iOS but we are going to deal with Android, follow the instructions at https://developers.google.com/maps/documentation/android-sdk/get-api-key to get API Key. Once you have your API key, add it to your Flutter app in the application manifest (android/app/src/main/AndroidManifest.xml), as follows:

  <manifest ...

    <application ...

      <meta-data android:name="com.google.android.geo.API_KEY"

                 android:value="YOUR ANDROID API KEY HERE"/>

Adding a GoogleMap widget

Now you are ready to add a GoogleMap widget! Run flutter clean to make sure the API key changes are picked up on the next build. Then, add a GoogleMap widget that covers the entire screen:

import 'dart:async';

import 'package:flutter/material.dart';

import 'package:google_maps_flutter/google_maps_flutter.dart';

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

class MyApp extends StatefulWidget {

@override

_MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

  Completer<GoogleMapController> _controller = Completer();

static const LatLng _center = const LatLng(45.521563, -122.677433);

void _onMapCreated(GoogleMapController controller) {

_controller.complete(controller);

}

@override

  Widget build(BuildContext context) {

     return MaterialApp(

       home: Scaffold(

         appBar: AppBar(

           title: Text('Maps Sample App'),

           backgroundColor: Colors.green[700],

           ),

           body: GoogleMap(

             onMapCreated: _onMapCreated,

             initialCameraPosition: CameraPosition(

               target: _center,

               zoom: 11.0,

          ),

        ),

      ),

    );

  }

}

Testing the app

After you have completed doing all this stuff type "flutter run" to run your app.

The app should look as follows:

https://github.com/neev123dev
https://dev.to/neev123dev

Whas up! guys in this Blog I am going to tell you more about git and github

Debugger 333 — Mon, 20 Jul 2020 12:19:43 +0000

Note if you haven't seen my blog on how to link a flutter project to github (https://dev.to/neev123dev/whoza-guys-i-am-back-again-with-an-another-blog-so-today-i-am-going-to-tell-you-how-to-link-you-flutter-project-to-github-4g3o) you will not understand what i am going to tell in this blog.

Before getting started I would like to inform you that in this blog we will know how to create a pull request and create a issue in somebody's or someone's repository. Please use the following repository to perform the following tasks

repository: https://github.com/neev123dev/bug-free-octo-potato

Getting started

Open your prefered browser and open the following url

https://github.com/neev123dev/bug-free-octo-potato
over there you will se an option fork

then you will land on a page that would look something like this

after that click on this option

then make your changes like

after doing that scroll down and you will se an opion commit click on that option.

then go to pull request

after doing this much click on new pull request

you will land to this page

then click on create pull request

after doing this give your pull request a title and a comment like

then click on create pull request

* Note if the user accepts your pull request then your changed files while appear on the user's repository. This is just a brief example if you want to change real code then you will have to clone it if you have any doubts of how to clone it then let me know in the comment.

Issues

open this url on your browser: https://github.com/neev123dev/bug-free-octo-potato

go to issues

click on new issue

write the title and body of the issue and submit it

https://github.com/neev123dev
https://dev.to/neev123dev

Whoza! GUYS I AM BACK AGAIN WITH AN ANOTHER BLOG. SO TODAY I AM GOING TO TELL YOU HOW TO LINK YOU FLUTTER PROJECT TO GITHUB

Debugger 333 — Thu, 16 Jul 2020 14:42:18 +0000

Requirements:

git bash (can download from https://git-scm.com/)
vs code
flutter web (link of the blog to install flutterweb https://dev.to/neev123/hey-guys-today-i-am-going-to-tell-you-how-to-setup-flutter-and-flutter-web-on-windows-10-38jp)
https://github.com/

Lets get started

Open github on you browser
sign in or create an account. After creating an account create a new repo.

connecting your flutter code with github

After creating a repo open your vs code and if you remember in my last blog we set up flutterweb working so open that project if you have did changes that's completely okay in this blog we are just going to focus how to link the project. Open your the provided terminal by vs code and type the following:

  git init
  git add .
  git commit -m "first commit"

After doing this open your repo scroll down and you will se an option on the bottom to copy the code

paste that code in your terminal as shown in the example

  git remote add origin https://github.com/neev123/ewh.git
  git push -u origin master

please don't copy the code given up because you can get a different url like

after doing this go to your github repo page and reload it you will se you files and folders on the page
example:

https://github.com/neev123dev/
https://dev.to/neev123dev

Hey guys today I am going to tell you how to setup flutter and flutter web on windows 10

Debugger 333 — Tue, 14 Jul 2020 08:07:28 +0000

Before zooming in I would like to tell you the system requirments and apps required to setup and run flutter, flutter web.

System Requirments

windows 7 or later
64 bit
2 GB diskspace

App Requirments

powershell 5.0 (preinstalled with windows 10)
git for windows
Visual Studio Code
Chrome

Start by typing the following code:

    git clone https://github.com/flutter/flutter.git -b stable

Update your path
If you wish to run Flutter commands in the regular Windows console, take these steps to add Flutter to the PATH environment variable:

From the Start search bar, enter ‘env’ and select Edit environment variables for your account.
Under User variables check if there is an entry called Path:
If the entry exists, append the full path to flutter\bin using ; as a separator from existing values.
If the entry doesn’t exist, create a new user variable named Path with the full path to flutter\bin as its value. You have to close and reopen any existing console windows for these changes to take effect.

Web setup

Run the following commands to use the latest version of the Flutter SDK from the beta channel and enable web support:

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

Once web is enabled, the flutter devices command outputs a Chrome device that opens the Chrome browser with your app running, and a Web Server that provides the URL serving the app.

   flutter devices

It should show you the following

2 connected device:

Web Server • web-server • web-javascript • Flutter Tools
Chrome • chrome • web-javascript • Google Chrome 81.0.4044.129

To create a new app that includes web support (in addition to mobile support), run the following commands, substituting myapp with the name of your project:

    flutter create myapp
    cd myapp

To run your flutter app on web type the following command:

    flutter run -d chrome

It should show you this:

Now if you want to edit code then open your File Manager

right click on the folder you want to edit there you will see an option open with code click on that option and if you want to change or edit code go to lib folder and there you can add files and wright code remember your main application folder is "lib"

after changing code go to your powershell and type:

If you want to add packages go to pubspec.yaml file under

    flutter:sdk

add your package(pub.dev) after you add dependencies paste the package in your main.dart file and you are done.

https://github.com/neev123dev
https://dev.to/neev123dev