Hello friends, In today’s tutorial we would learn about sorting list in flutter. Many of us heard about Sorting word but we don’t know what it actually means ? Sorting means arrange List data into meaningful easy to understand order. By default a list can be created with multiple data and data can be arranged or not. But using sort we can arrange it and show user data in correct format. Today we would learn about sort array list alphabetically in flutter. So let’s get started 🙂 .
Method to Sort List Alphabetically :-
- ListName.sort() .
Contents in this project Example of Sort Array List Alphabetically in Flutter Dart :-
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 MyApp extends StatelessWidget our first parent class. In this class we would call our App child class.
|
1 2 3 4 5 6 7 8 9 10 |
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Flutter Sort List Alphabetically')), body: App())); } } |
4. Creating App extends StatefulWidget class. In this class we would make AppState class with createState() method to enable mutable state management.
|
1 2 3 |
class App extends StatefulWidget { AppState createState() => AppState(); } |
5. Creating our main AppState extends State class. This is our main Child class.
|
1 2 3 4 5 |
class AppState extends State { } |
6. Creating flutter’s inbuilt method initState(). This method allows us to call any function or event on app start time. So in this method we would convert our List to Alphabetically using Sort function.
|
1 2 3 4 5 6 |
@override void initState() { // Sorting List Alphabetically. listData.sort(); super.initState(); } |
7. Creating our List named as listData. As you can see our below List is not arranged.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
final List<String> listData = <String>[ 'Cherries', 'Banana', 'Blackberries', 'Carambola', 'Blackcurrant', 'Apple', 'Apricots', 'Avocado', 'Blueberries', 'Clementine', 'Breadfruit', 'Coconut', ]; |
8. Creating Widget Build area -> Here we would make our main ListView.builder() widget and show us the List.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
@override Widget build(BuildContext context) { return ListView.builder( itemCount: listData.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, margin: const EdgeInsets.all(2), color: Colors.teal, child: Center( child: Text( '${listData[index]}', style: const TextStyle(fontSize: 24, color: Colors.white), )), ); }); } |
9. 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 |
import 'package:flutter/material.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( appBar: AppBar(title: const Text('Flutter Sort List Alphabetically')), body: App())); } } class App extends StatefulWidget { AppState createState() => AppState(); } class AppState extends State { @override void initState() { // Sorting List Alphabetically. listData.sort(); super.initState(); } final List<String> listData = <String>[ 'Cherries', 'Banana', 'Blackberries', 'Carambola', 'Blackcurrant', 'Apple', 'Apricots', 'Avocado', 'Blueberries', 'Clementine', 'Breadfruit', 'Coconut', ]; @override Widget build(BuildContext context) { return ListView.builder( itemCount: listData.length, itemBuilder: (BuildContext context, int index) { return Container( height: 50, margin: const EdgeInsets.all(2), color: Colors.teal, child: Center( child: Text( '${listData[index]}', style: const TextStyle(fontSize: 24, color: Colors.white), )), ); }); } } |
Screenshot With List Sort Alphabetically :-
