Animating a Loop in Flutter - animation

Question

I'm trying to make an animation of sorting algorithms in flutter. So far I've coded the algorithm and managed to get some sort of animation by iterating once at a time instead of the whole sorting process but you have to keep tapping the button to sort, one item at a time. I've been trying to look for a way to animate this process. Here's my code:
import 'package:flutter/material.dart';
import 'dart:math';
List<double> rectHeights = new List<double>();
int n = 2;
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sorting',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key}) : super(key: key);
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
int _selectedIndex = 0;
final _widgetOptions = [
Text('Index 0: Sort'),
Text('Index 1: Shuffle'),
];
#override
void initState() {
super.initState();
Random random = new Random();
for (int i = 0; i < 35; i++) {
double ranNum = random.nextDouble() * 600;
rectHeights.add(ranNum);
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Padding(
padding: EdgeInsets.all(8.0),
child: Center(
child: Row(
children: rectangles(),
),
),
),
bottomNavigationBar: BottomNavigationBar(
iconSize: 50.0,
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(icon: Icon(Icons.sort), title: Text('Sort', style: TextStyle(fontSize: 20.0),)),
BottomNavigationBarItem(icon: Icon(Icons.shuffle), title: Text('Shuffle', style: TextStyle(fontSize: 20.0),)),
],
currentIndex: _selectedIndex,
fixedColor: Colors.blue,
onTap: _onItemTapped,
),
);
}
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
switch(_selectedIndex) {
case 0:
setState(() {
insertSortOnce(rectHeights, 1);
});
break;
case 1:
setState(() {
shuffle(rectHeights);
n = 2;
});
}
}
}
List<Widget> rectangles() {
List<Widget> rects = new List<Widget>();
for (double height in rectHeights) {
var rect = Padding(
padding: EdgeInsets.symmetric(horizontal: 1.0),
child: Container(
width: 8.0,
height: height,
decoration: BoxDecoration(
shape: BoxShape.rectangle,
color: Colors.blue
),
),
);
rects.add(rect);
}
return rects;
}
void insertSort(values, choice) {
int i, j;
double key, temp;
for (i = 1; i < values.length; i++) {
key = values[i];
j = i - 1;
switch (choice) {
case 1:
while (j >= 0 && key < values[j]) {
temp = values[j];
values[j] = values[j + 1];
values[j + 1] = temp;
j--;
}
break;
case 2:
while (j >= 0 && key > values[j]) {
temp = values[j];
values[j] = values[j + 1];
values[j + 1] = temp;
j--;
}
break;
}
}
}
void insertSortOnce(values, choice) {
int i, j;
double key, temp;
for (i = 1; i < n; i++) {
key = values[i];
j = i - 1;
switch (choice) {
case 1:
while (j >= 0 && key < values[j]) {
temp = values[j];
values[j] = values[j + 1];
values[j + 1] = temp;
j--;
}
break;
case 2:
while (j >= 0 && key > values[j]) {
temp = values[j];
values[j] = values[j + 1];
values[j + 1] = temp;
j--;
}
break;
}
}
n++;
}
List shuffle(List items) {
var random = new Random();
// Go through all elements.
for (var i = items.length - 1; i > 0; i--) {
// Pick a pseudorandom number according to the list length
var n = random.nextInt(i + 1);
var temp = items[i];
items[i] = items[n];
items[n] = temp;
}
return items;
}

Answer 1

You can use a Future function with a short delay, for example (one second) to call the insertSort() after each second till the rectHeights are sorted:
var _notSorted = true ;
var _shiftNotPressed = true ;
Future sortRectangles() async {
while(_notSorted & _shiftPressed) { // You have to provide a condition to know when to stop
await new Future.delayed(const Duration(seconds: 1), () {
insertSortOnce(rectHeights, 1);
}
);
}
}
Then checking for shuffling:
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
switch(_selectedIndex) {
case 0:
setState(() {
insertSortOnce(rectHeights, 1);
});
break;
case 1:
_shiftNotPressed = false ; // This is what you should add
setState(() {
shuffle(rectHeights);
n = 2;
});
}
}
Then Sorting completion:
void insertSortOnce(values, choice) {
_notSorted = false ; // if it didn't execute the loop it means sorted
int i, j;
double key, temp;
for (i = 1; i < n; i++) {
key = values[i];
j = i - 1;
switch (choice) {
case 1:
while (j >= 0 && key < values[j]) {
_notSorted = true ; //You should figure a more efficient way to do this
temp = values[j];
values[j] = values[j + 1];
values[j + 1] = temp;
j--;
}
break;
case 2:
while (j >= 0 && key > values[j]) {
temp = values[j];
values[j] = values[j + 1];
values[j + 1] = temp;
j--;
}
break;
}
}
n++;
}
Also, You should include in your condition whether the shift button is pressed and to terminate accordingly.