CODEWITHSUNDEEP
phpmysqlflutterstream-builder
Maen Al Nassan
Maen Al Nassan

Reputation: 65

Passing the data from mysql into flutter widget

I had a problem with my flutter app here Geting data from mysql to StreamBuilder Flutter and here how to force the server to respond as json now everything is fine but the StreamBuilder is passing only the first row from the table what should I do.

Latest flutter code:-

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

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 Server',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.pink,
      ),
      home: MyHomePage(title: 'Flutter Server App'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  StreamController<Map> _streamController = StreamController<Map>();
  Timer _timer;

  Future getData() async {
    var url = 'https://milk-white-reveille.000webhostapp.com/get.php';
    http.Response response = await http.get(url);
    Map data = json.decode(response.body);
    //Add your data to stream
    _streamController.add(data);
  }

  @override
  void initState() {
    super.initState();
    getData();
    //Check the server every 5 seconds
    _timer = Timer.periodic(Duration(seconds: 5), (timer) => getData());
  }

  @override
  void dispose() {
    //cancel the timer
    if (_timer.isActive) _timer.cancel();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
        centerTitle: true,
      ),
      body: StreamBuilder(
        stream: _streamController.stream,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (!snapshot.hasData) return Text('Loading...');
            return ListView(
              children: [
                ListTile(
                  title: Text(snapshot.data['title']),
                  subtitle: Text(snapshot.data['type']),
                ),
              ],
            );
        },
      ),
    );
  }
}

Latest PHP code:-

get.php

<?php
header("Content-type: application/json; charset=utf-8");
require_once('db.php');
$query = 'SELECT * FROM `flutter` WHERE 1';
$stm = $db->prepare($query);
$stm->execute();
$row = $stm->fetch(PDO::FETCH_ASSOC);
echo json_encode($row);
$row = $stm->fetch(PDO::FETCH_ASSOC);
echo json_encode($row);

db.php

<?php

$dns = 'mysql:host=localhost;dbname=id13424627_flutter';
$user = 'id13424627_flutter_app';
$pass = 'Flutter_maen12';

try{
  $db = new PDO ($dns, $user, $pass);
  
}catch( PDOException $e){
    $error = $e->getMessage();
    echo $error;
}

Upvotes: 1

Views: 11745

Answers (2)

Mira BeeCalifonia
Mira BeeCalifonia

Reputation: 11

Check $query = 'SELECT * FROM flutter WHERE 1';

WHERE 1

Remove to display or or change to WHERE id='whatever you want to display only'

Upvotes: 0

Ali Bayram
Ali Bayram

Reputation: 7921

The changes those you should on server side;

<?php
header("Content-type: application/json; charset=utf-8");
require_once('db.php');
$query = 'SELECT * FROM `flutter`';
$stm = $db->prepare($query);
$stm->execute();
$rows = $stm->fetchAll(PDO::FETCH_ASSOC);
echo json_encode($rows);

your flutter codes;

class _MyHomePageState extends State<MyHomePage> {
  StreamController<List> _streamController = StreamController<List>();
  Timer _timer;

  Future getData() async {
    var url = 'https://milk-white-reveille.000webhostapp.com/get.php';
    http.Response response = await http.get(url);
    List data = json.decode(response.body);

    //Add your data to stream
    _streamController.add(data);
  }

  @override
  void initState() {
    getData();

    //Check the server every 5 seconds
    _timer = Timer.periodic(Duration(seconds: 5), (timer) => getData());

    super.initState();
  }

  @override
  void dispose() {
    //cancel the timer
    if (_timer.isActive) _timer.cancel();

    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("widget.title"),
        centerTitle: true,
      ),
      body: StreamBuilder<List>(
        stream: _streamController.stream,
        builder: (BuildContext context, AsyncSnapshot snapshot) {
          if (snapshot.hasData)
            return ListView(
              children: [
                for (Map document in snapshot.data)
                  ListTile(
                    title: Text(document['title']),
                    subtitle: Text(document['type']),
                  ),
              ],
            );
          return Text('Loading...');
        },
      ),
    );
  }
}

Upvotes: 4

Related Questions