CODEWITHSUNDEEP
flutter
Yoss
Yoss

Reputation: 546

why is flutter refusing to connect on localhost:8000 or 127.0.01:8000?

I'm following the Flutter Networking/HTTP tutorial to do a GET request to a server running on my localhost:8000. Visiting my localhost via my browser works fine. This works fine too when I point to any real URL, such as https://example.com, but when I point to https://127.0.0.1:8000 I get an error like " connection refused "

The port in the error above changes each time I reload the app. I looked in the http package code and it doesn't seem like there is a way to specify the port for the URL. How do I point to my localhost please it's my first time with flutter ? PS: i'm running on my phone device , my pc and phone are connected with the same wifi, my network is private.

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

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

class _MyHomePageState extends State<MyHomePage> {

  static const url = 'http://127.0.0.1:8000/api/membres/';

  // static const url = 'http://10.0.2.2:8000/api/membres/';
  //static const url = 'http://localhost:8000/api/membres/';
  //static const url= "192.168.1...:8000/association/api/membres";
  //static const url = 'https://jsonplaceholder.typicode.com/users';
  Future<List<Map<String, dynamic>>> _future;

  @override
  void initState() {
    super.initState();
    _future = fetch();
  }

  Future<List<Map<String, dynamic>>> fetch() {
    return http
        .get(url)
        .then((response) {
          return response.statusCode == 200
              ? response.body
              : throw 'Error when getting data';
        })
        .then((body) => json.decode(body))
        .then((list) => (list as List).cast<Map<String, dynamic>>());
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: RefreshIndicator(
        onRefresh: () async {
          _future = fetch();
          setState(() {});
          return _future;
          },
        child: FutureBuilder<List<Map<String, dynamic>>>(
          future: _future,
          builder: (context, snapshot) {
            if (snapshot.hasError) {
              return Center(
                child: Container(
                  constraints: BoxConstraints.expand(),
                  child: SingleChildScrollView(
                    physics: AlwaysScrollableScrollPhysics(),
                    child: Text(snapshot.error.toString()),),),);}
            if (!snapshot.hasData) {
              return Center(
                child: CircularProgressIndicator(),
              );}
            return ListView.builder(
              itemCount: snapshot.data.length,
              itemBuilder: (BuildContext context, int index) {
                final item = snapshot.data[index];
                return ListTile(
                  title: Text(item['name']),
                  subtitle: Text(item['email']),
                );
              },
            );
          },
        ),
      ),
    );
  }
}

enter image description here

enter image description here

enter image description here

Upvotes: 27

Views: 55628

Answers (5)

scdev
scdev

Reputation: 11

This one work for me (i use)

$: adb reverse tcp:8080 tcp:8080

Upvotes: 1

Muhammad Hamza Ehsan
Muhammad Hamza Ehsan

Reputation: 47

In window 10 Open Settings go to network and internet setting after that click on Wifi on left side after that Click on your connected Wifi after that change Network Profile from public to private now your real devices will call apis you want to call from server

Upvotes: 3

Seddiq Sorush
Seddiq Sorush

Reputation: 3132

If you are using an Android emulator then localhost on the emulator is not 127.0.0.0 it is 10.0.2.2, so, on Android emulator you need to write https://10.0.2.2:8000, the https://127.0.0.1:8000 will not work on real device too. because localhost means something different on real device.

For more information on how to connect a Flutter app to localhost on emulator or on a real device click on the link Connecting Flutter application to Localhost

Upvotes: 59

Chanaka Weerasinghe
Chanaka Weerasinghe

Reputation: 5742

You have to keep your mobile phone and computer same network connection.

then pass your url assuming your ip and url is this 192.168.1.102:8000

static const url= "192.168.1.102:8000/association/api/membres";

Upvotes: 15

sid
sid

Reputation: 63

Note: Please set your network as "Home Network". Setting the network as Home Network means that you are allowing your PC to share stuff with other devices on the same network.

If you are using Windows 10, this can be done with the following:

Open Settings Go to Network & Internet Select WiFi in the left menu Tap on the name of the connected WiFi Set the Network Profile of the network to be Private If you are having an issue, it is most likely to do with Windows Firewall.

Open Control Panel Go to Windows Defender Firewall Tap on Allow an app or feature through Windows Defender Firewall Check whether the app is enabled for Private networks (there should be a tick) If it is not enabled, tap Change settings and tick the checkbox under Private for the app

Upvotes: 4

Related Questions