Welcome friends, In today’s tutorial we would learn a simple thing in flutter. Some times in many android & iOS applications we have seen a Floating Action Button just above the ListView widget. Doesn’t matter the ListView is dynamic or static it will work on both List. This type of functionality can be achieved easily in flutter. So in today’s tutorial we would learn about Flutter Show Floating Action Button Above Over ListView in Android iOS Example.
Contents in this project Flutter Show Floating Action Button Above Over ListView in Android iOS Example:-
1. Open your project’s main.dart file and import material.dart package.
|
1 |
import 'package:flutter/material.dart'; |
2. Creating void main runApp() method and here we would call our main MyApp class.
|
1 |
void main() => runApp(MyApp()); |
3. Creating our main Parent class named as MyApp extends StatelessWidget.
|
1 2 3 4 5 |
class MyApp extends StatelessWidget { } |
4. Creating a Final type demo String List named as alphabets. We would use this List to display items in List View widget.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
final List<String> alphabets = <String>[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ]; |
5. Creating a void temp() method with some random Print message on Terminal screen. We would call this function on Floating Action Button Click Event.
|
1 2 3 |
void temp() { print('Floating Action Button Clicked'); } |
6. Creating Widget Build area -> Material App -> Scaffold Widget -> ListView.builder() widget. After completing the ListView.builder() code we simply put a Comma ( , ) and put the floating action button widget using floatingActionButton. We would also call the temp() function on Floating Action Button onPress event.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Floating Action Button Above ListView')), body: ListView.builder( itemCount: alphabets.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, margin: EdgeInsets.all(2), color: Colors.lightGreen, child: Center( child: Text( '${alphabets[index]}', style: TextStyle(fontSize: 24, color: Colors.white), )), ); }), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () => temp(), ), )); } |
7. Complete source code for main.dart file:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { final List<String> alphabets = <String>[ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ]; void temp() { print('Floating Action Button Clicked'); } @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: Text('Floating Action Button Above ListView')), body: ListView.builder( itemCount: alphabets.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, margin: EdgeInsets.all(2), color: Colors.lightGreen, child: Center( child: Text( '${alphabets[index]}', style: TextStyle(fontSize: 24, color: Colors.white), )), ); }), floatingActionButton: FloatingActionButton( child: Icon(Icons.add), onPressed: () => temp(), ), )); } } |
Screenshots:
