i am getting blue splash animation Problem in flutter - flutter

Question

I am getting a blue splash Animation problem when I am trying to swift between in the list of an image of the PageView
but when I am using simple Image then its working fine But when I am trying to get an image from SQLite Database then I am getting the blue Splash refresh Problem in animation
Working Animation with asset Image => https://i.imgur.com/2XJDpRx.mp4
Any help would be deeply appreciated!
Below is the SQLite Database
import 'dart:io';
import 'package:scoped_model/models/person.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:sqflite/sqflite.dart';
import 'package:path/path.dart';
class DatabaseHelper with ChangeNotifier {
static DatabaseHelper _databaseHelper;
static Database _database;
DatabaseHelper._namedConstructor();
static String _dbFileName = "animationWork.db";
static int _dbVersion = 1;
static String _personTableName = "person";
factory DatabaseHelper() {
// Singleton Design Structure - For multiple use of a single Object
if (_databaseHelper == null) {
_databaseHelper = DatabaseHelper._namedConstructor();
return _databaseHelper;
} else {
return _databaseHelper;
}
}
Future<Database> _getDatabase() async {
// Singleton Design Structure - For multiple use of a single Object
if (_database == null) {
_database = await _initializeDatabase();
return _database;
} else {
return _database;
}
}
_initializeDatabase() async {
var databasePath = await getDatabasesPath();
var path = join(databasePath, _dbFileName);
bool exists = await databaseExists(path);
if (!exists) {
// exists == false
try {
print("Trying to create a new database cause it doesn\'t exist.");
await Directory(dirname(path)).create(recursive: true);
} catch (error) {
print('Database could not be created at path $path');
print("Error is : $error");
}
ByteData data = await rootBundle.load(join("assets", _dbFileName));
List<int> bytes =
data.buffer.asUint8List(data.offsetInBytes, data.lengthInBytes);
await File(path).writeAsBytes(bytes, flush: false);
} else {
print("Database exists.");
}
print(
"Opening database anyway, whether it was already there or has just been created.");
return await open database(path, version: _dbVersion, readOnly: false);
}
// GET "person" table from DB
// The method below returns the "person" table from the database.
// "person" table is a list of maps of Person objects
/*[
{"personID" : 1, "personDisplayName" : ""Meral", "personPhoneNumber" : "[phone]", "personPhoto" : "AFH474JDFOWÊBB"},
{"personID" : 2, "personDisplayName" : ""Özge", "personPhoneNumber" : "[phone]", "personPhoto" : "AFH474JDFOWÊBB"},
{"personID" : 3, "personDisplayName" : ""Semahat", "personPhoneNumber" : "[phone]", "personPhoto" : "AFH474JDFOWÊBB"}
] */
Future<List<Map<String, dynamic>>> getPersonTable() async {
var db = await _getDatabase();
var result = db.query(_personTableName);
return result;
}
// CONVERT "person" table from DB to all Person list => List of Person objects
/*
The method below converts the "person" table - which consists of a list of maps of Person objects -
into a list of Person objects.
*/
Future<List<Person>> getAllPersonsList() async {
List<Map<String, dynamic>> listOfMapsOfPersonFromDatabase =
await getPersonTable();
var allPersonObjectsList = List<Person>();
var reversedList = List<Person>();
for (Map personMap in listOfMapsOfPersonFromDatabase) {
allPersonObjectsList.add(Person.fromMap(personMap));
}
if (allPersonObjectsList.length > 1) {
reversedList = List.from(allPersonObjectsList.reversed);
print("database getAllPersonList'te if uzunluk büyüktür 1'deyim");
for (var item in allPersonObjectsList) {
print(" ${item.personDisplayName}");
}
return reversedList;
} else {
print(
"database getAllPersonList'te else, uzunluk eşittir 1 ya da daha küçük'teyim");
print("allPersonObjectsList from db = $allPersonObjectsList");
return allPersonObjectsList;
}
}
// ADD Person to DB
Future<int> addPersonToPersonTableAtDb(Person person) async {
print(
"addPersonToPersonTableAtDb bloğundayım. Gelen personDisplayName = ${person.personDisplayName}");
var db = await _getDatabase();
var result = await db.insert(_personTableName, person.personToMap());
notifyListeners();
return result;
}
// UPDATE Person at DB
Future<int> updatePersonAtDb(Person personToUpdate) async {
var db = await _getDatabase();
var result = await db.update(_personTableName, personToUpdate.personToMap(),
where: "personID = ?", whereArgs: [personToUpdate.personID]);
notifyListeners();
return result;
}
// DELETE Person from DB
Future<int> deletePersonFromDb(int personID) async {
var db = await _getDatabase();
var result = db
.delete(_personTableName, where: "personID = ?", whereArgs: [personID]);
notifyListeners();
return result;
}
}
below is the Animation Screen Code
import 'dart:io';
import 'package:scoped_model/database/database_helper.dart';
import 'package:scoped_model/design_elements/size_config.dart';
import 'package:scoped_model/design_elements/smart_design.dart';
import 'package:scoped_model/models/person.dart';
import 'package:scoped_model/utils/format_photo.dart';
import 'package:dashed_circle/dashed_circle.dart';
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
//there is some way to improve the way we have to do this skvkjsdvjdjsjvdsjhljshdljfhjdsnvjzvjzjvnjsljdvljsdlvnsdv
import 'add_contact_screen.dart';
class AnimationScreen extends StatefulWidget {
List<Person> allPersonsFromDB;
AnimationScreen({this.allPersonsFromDB});
_AnimationScreenState createState() => _AnimationScreenState();
}
class _AnimationScreenState extends State<AnimationScreen>
with TickerProviderStateMixin {
//
int builtTime = 0;
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
TextEditingController _textEditingController = TextEditingController();
PageController _pageController;
var heightAppBar = AppBar().preferredSize.height;
DatabaseHelper databaseHelper;
List<Person> allPersonsFromDBReordered;
List<Person> personsToPresent;
int pageIndex = 0;
int personIndex = 0;
Animation dGap;
Animation dBase;
Animation dReverse;
Animation<Color> dColorAnimation;
AnimationController dController;
#override
void initState() {
super.initState();
print("AppBar height = ${AppBar().preferredSize.height}");
databaseHelper = DatabaseHelper();
_pageController =
PageController(initialPage: pageIndex, viewportFraction: .51);
allPersonsFromDBReordered = List<Person>();
personsToPresent = List<Person>();
animateDashedCircle();
getPersonsList();
}
bool isInteger(num value) => value is int || value == value.roundToDouble();
#override
void dispose() {
dController.dispose();
_pageController.dispose();
super.dispose();
}
Future<void> getPersonsList() async {
print('getPersonList called');
databaseHelper.getAllPersonsList().then((value) {
if (value.length != 0) {
setState(() {
print("setState 1 çağırıldı.");
personsToPresent = value;
print("Length of personsToPresent = ${personsToPresent.length}");
});
} else {
print("database'deki personList uzunluğu sıfır");
setState(() {
personsToPresent = [];
});
print('database deki Person listesi boş.');
}
});
}
void animateDashedCircle() {
dController = AnimationController(
vsync: this, duration: Duration(milliseconds: 1200));
dBase = CurvedAnimation(parent: dController, curve: Curves.ease);
dReverse = Tween<double>(begin: 0.0, end: -1.0).animate(dBase);
dColorAnimation =
ColorTween(begin: Colors.deepOrange, end: Colors.deepPurple)
.animate(dController);
dGap = Tween<double>(begin: 3.0, end: 0.0).animate(dBase);
dController.forward();
}
#override
Widget build(BuildContext context) {
builtTime++;
SizeConfig().init(context);
print(
"Screen height = ${MediaQuery.of(context).size.height}, , $builtTime kez build edildi.");
return Scaffold(
key: _scaffoldKey,
appBar: PreferredSize(
preferredSize: Size.fromHeight(SizeConfig.blockSizeVertical * 7),
child: AppBar(
backgroundColor: Colors.blueAccent,
centerTitle: true,
actions: [
Row(
children: [
Padding(
padding:
EdgeInsets.all(SmartDesign.getPadding(context, 8) / 2),
child: GestureDetector(
child: Icon(
Icons.person_add,
color: Colors.white,
size: SmartDesign.getPadding(context, 16) * 1.25,
),
onTap: () {
print('Add new person tapped.');
/* BURAYI YAZDIN BIRAKTIN ******** */
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => ContactListScreen()))
.then((value) {
getPersonsList();
setState(() {
pageIndex = 0;
_pageController.jumpToPage(pageIndex);
});
});
},
/* BURAYI YAZDIN BIRAKTIN ******* */
),
),
Padding(
padding:
EdgeInsets.all(SmartDesign.getPadding(context, 8) / 2),
child: GestureDetector(
child: Icon(
Icons.list,
color: Colors.white,
size: SmartDesign.getPadding(context, 24) * 1.25,
),
onTap: () {},
),
),
],
)
],
title: Text(
'DashedCircle',
textAlign: TextAlign.end,
style: TextStyle(color: Colors.white),
),
),
),
body: Center(
child: Container(
color: Colors.white,
child: PageView.builder(
// clipBehavior: Clip.none,
itemCount:
personsToPresent.length <= 0 ? 1 : personsToPresent.length,
physics: BouncingScrollPhysics(),
controller: _pageController,
onPageChanged: (page) {
if (isInteger(page)) {
print("integer page index = $page");
animateDashedCircle();
setState(() {
pageIndex = page;
});
}
print('PageIndex : $page');
},
itemBuilder: (context, index) {
return Container(
child: Padding(
padding: EdgeInsets.only(
top: SmartDesign.getPadding(context, 16),
left: SmartDesign.getPadding(context, 6),
right: SmartDesign.getPadding(context, 6)),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
index == pageIndex
? Container(
child: AnimatedBuilder(
animation: dController,
builder: (_, child) {
return RotationTransition(
turns: dReverse,
child: DashedCircle(
gapSize: dGap.value,
dashes: 50,
color: dColorAnimation.value,
child: AnimatedBuilder(
animation: dController,
builder: (_, child) {
return RotationTransition(
turns: dBase,
child: Padding(
padding: EdgeInsets.all(
(SmartDesign.getPadding(
context, 6) /
2)),
child: personsToPresent.length <=
0
? CircleAvatar(
//radius: 90,
radius:
MediaQuery.of(context)
.size
.width /
7,
backgroundImage: AssetImage(
"assets/images/blueAvatar2_Half.png"))
: personsToPresent[index]
.personPhoto ==
null
? CircleAvatar(
//radius: 90,
radius: MediaQuery.of(
context)
.size
.width /
7,
backgroundImage:
AssetImage(
"assets/images/blue_avatar.png"),
/*child: Center(
child: Text(
'Initials')),*/
)
: CircleAvatar(
//radius: 90,
radius: MediaQuery.of(
context)
.size
.width /
7,
backgroundImage: FormatPhoto
.memoryImageFromBase64String(
personsToPresent[
pageIndex]
.personPhoto),
),
),
);
},
child: Placeholder(
key: Key('colorAnimated')),
),
),
);
},
child: Placeholder(key: Key('animated')),
),
//color: Colors.red,
)
: personsToPresent[index].personPhoto == null
? Container(
child: Padding(
padding: EdgeInsets.all(
(SmartDesign.getPadding(context, 6) /
2)),
child: CircleAvatar(
//radius: 90,
radius:
MediaQuery.of(context).size.width / 7,
backgroundImage: AssetImage(
"assets/images/green_avatar.png"),
),
),
)
: Container(
child: Padding(
padding: EdgeInsets.all(
(SmartDesign.getPadding(context, 6) /
2)),
child: CircleAvatar(
//radius: 90,
radius:
MediaQuery.of(context).size.width /
7,
backgroundImage: FormatPhoto
.memoryImageFromBase64String(
personsToPresent[index]
.personPhoto)),
),
),
Padding(
padding: EdgeInsets.only(
top: (SmartDesign.getPadding(context, 8)),
left: (SmartDesign.getPadding(context, 6) / 1.5),
right: (SmartDesign.getPadding(context, 6) / 1.5),
),
child: Column(
children: [
Text(
personsToPresent.length <= 0
? ""
: "${personsToPresent[index].personDisplayName}",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize:
MediaQuery.of(context).size.width / 23,
color: Colors
.black // Font size iPhone 11'e göre 18 bulmak için
),
textAlign: TextAlign.center,
),
],
),
),
//_buildCard(index),
],
),
),
);
}, // itemBuilder(){}
),
),
),
);
}
}
I added a Video file to Show the error problem => https://i.imgur.com/ilrURiW.mp4

Answer 1

Every time your AnimationScreen builds it keeps on reloading the image with FormatPhoto.memoryImageFromBase64String(...).
To fix this, when you load your users in getPersonsList and when you are creating your Person objects, you should call the function FormatPhoto.memoryImageFromBase64String(...) and assign it to personPhoto or a new variable. Then use that as the image like this:
CircleAvatar(
radius: MediaQuery.of(context).size.width / 7,
// or personsToPresent[pageIndex].photoThatWasLoaded
backgroundImage: personsToPresent[pageIndex].personPhoto,
)