How to retrieve data from firebase straight into the app? - firebase

Question

I am new to flutter. I want to retrieve data from firebase firestore database and display it in the application. My requirement is to display the data in the form of a text in the screen. I have attached the my code below for a better understanding.
Note : I have already configured firebase in my project.
Code :
class dashboard extends StatefulWidget {
#override
_dashboardState createState() => _dashboardState();
}
// ignore: camel_case_types
class _dashboardState extends State<dashboard> {
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
}
int _selectedIndex = 0;
#override
Widget build(BuildContext context) {
MediaQueryData screen = MediaQuery.of(context);
final authService = Provider.of<AuthService>(context);
return Scaffold(
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 80.0, right: 250),
child: Center(
child: Container(
width: screen.size.width,
// height: 20.0,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(15.0)),
child: (const Text(
'I need the data retreievd from firebase firestore to be displayed here.',
textAlign: TextAlign.justify,
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.black),
)),
),
),
),
Padding(
padding: EdgeInsets.only(left: 300.0, top: 1.0),
child: IconButton(
icon: new Icon(Icons.account_circle, size: 30.0),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ProfilePage(),
),
);
},
),
),
Padding(
padding: EdgeInsets.only(left: 300.0, top: 5.0),
child: IconButton(
icon: const Icon(
Icons.notifications,
size: 25.0,
),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => Notifications(),
),
);
},
),
),
Padding(
padding: const EdgeInsets.only(top: 0.0),
child: Center(
child: Container(
width: 390,
height: 450,
decoration: BoxDecoration(
color: Colors.green.shade100,
borderRadius: BorderRadius.circular(10.0),
),
),
),
),
],
),
),
floatingActionButton: FloatingActionButton(onPressed: () async {
await authService.signOut();
}),
// : _children[_currentIndex],
bottomNavigationBar: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
backgroundColor: Colors.green[100],
items: const [
BottomNavigationBarItem(
icon: Icon(Icons.book_online),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.read_more),
label: 'Settings',
),
BottomNavigationBarItem(
icon: Icon(Icons.account_circle),
label: 'Profile',
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.green[800],
onTap: _onItemTapped,
),
);
}
}

Answer 1

You canretrieve data from firebase firestore database and display it in the application directly.
SteamBuilder(
steam:query(FirebaseFirestore.instance.collection('collection_name').
doc('doc_id').snapshot());
builder(context,snapshot){
return Text(snapshot.data.docs[0].get('field');
}
)