Fetch Data From database and show on listView.builder?-CodePudding

I want to fetch data from the Database and want to show all the records of some columns by using listView.builder in flutter code .How I can do this ??

static Future<List> getData() async {
final db = await SQLHelper.db();
var  data= (await db.rawQuery('select column1,column2,column3,column4 From table'));
return data.toList();
}
import 'package:flutter/material.dart';
import 'package:test_02/dbHelper.dart';

class showOutlets extends StatefulWidget {

  @override
  State<showOutlets> createState() => showOutletsState();
}
class showOutletsState extends State<showOutlets> {
  num age = -1;
  String birthDate = "";



  var data ;
  List<dynamic> list = [SQLHelper.getOutletsData()];

  bool _isLoading = false;
  void  _showFullRecord() async {

    data = await SQLHelper.getOutletsData( );



    setState(() {

      data =data;
      _isLoading = false;
    });

  }
  static  var boldStyle= const TextStyle(
    fontWeight: FontWeight.bold,
  );


  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title:  const Text('User Data' ),

        ),
        body: _isLoading? const Center(

          child: CircularProgressIndicator(),
        )
            : ListView.builder(
            itemCount: list.length,
            itemBuilder: (context, index ) => Card(
              color: Colors.orangeAccent,
              // color: Colors.orange[200],
              margin: const EdgeInsets.all(15),
              child: Column(
                children: [
                  const Text("USER INFORMATION ",
                    style: TextStyle(
                      fontSize: 20.0,
                  
                    ),),
             
                  // Text('NAME:${data}'),  // how can I show the data on the screen 
                 ],
              ),
            )
        )
    );
  }

CodePudding user response：

Create state variable future,

  late final future  = YourDBClass.getData();

Now use FutureBuilder

FutureBuilder(
  future: future,
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return ListView.builder(...loaded data on snapshot.dat..a);
    }

    if (snapshot.hasError) return Text("error");
    return CircularProgressIndicator();
  },
),

More about FutureBuilder

CodePudding user response：

I didn't understand what you really want. but here is an example of how you can get data from database and show them on the screen.

import 'package:flutter/material.dart';

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

class showOutlets extends StatefulWidget {
  @override
  State<showOutlets> createState() => showOutletsState();
}

class showOutletsState extends State<showOutlets> {
  num age = -1;
  String birthDate = "";
  bool _isLoading = true;

  List<dynamic> dataList;

  _getData() async {
    dataList = await getDataFromDatabase(); // get data here
    _isLoading = false;
  }

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('User Data'),
      ),
      body: _isLoading
          ? const Center(
              child: CircularProgressIndicator(),
            )
          : ListView.builder(
              itemCount: dataList.length,
              itemBuilder: (context, index) => Card(
                // Design your card.
                color: Colors.orangeAccent,
                margin: const EdgeInsets.all(15),
                child: Column(
                  children: [
                    const Text(
                      "USER INFORMATION ",
                      style: TextStyle(
                        fontSize: 20.0,
                      ),
                    ),
                  ],
                ),
              ),
            ),
    );
  }
}