Flutter Using Sqlite to display images? - flutter

Question

In my app there is an alert dialog witch displays the rating based on some conditions, the rating is with stars image, i have a function with the conditions witch displays the rating, on another screen, i need those rating for that level that the user plays the same image that displays on the alert dialog based on the conditions to display on the other screen. for example if the user gets as rating 3 stars, than he goes to the other screen he will see the same rating there.
db_helper.dart
class Picture {
late final int? id;
late final String title;
late final Uint8List picture;
Picture(this.id, this.title, this.picture);
Picture.fromMap(Map map, this.id, this.title, this.picture) {
id = map[id];
title = map[title];
picture = map[picture];
}
Map<String, dynamic> toMap() => {
"id": id,
"title": title,
"picture" : picture,
};
}
class DatabaseHelper {
static final _databasename = "rating.db";
static final _databaseversion = 1;
static final table = "my_table";
static final columnID = 'id';
static final columnName = "ratingWithStars";
static final DatabaseHelper _databaseHelper = DatabaseHelper._();
DatabaseHelper._();
late Database db;
factory DatabaseHelper() {
return _databaseHelper;
}
Future<Database> get databse async {
if (db != null) return db;
// krijon database nese nuk ka
db = await _initDatabase();
return db;
}
_initDatabase() async {
Directory documentdirecoty = await getApplicationDocumentsDirectory();
String path = join(documentdirecoty.path, _databasename);
return await openDatabase(path,
version: _databaseversion, onCreate: _onCreate);
}
// funksion qe krijon database nese nuk ekziston
Future _onCreate(Database db, int version) async {
// sql code
await db.execute("CREATE TABLE Picture(id INTEGER PRIMARY KEY, title TEXT, picture BLOB )");
}
void savePicture(Picture picture) async {
var dbClient = await db;
await dbClient.insert("Picture", picture.toMap());
}
Future<List<Picture>> getPictures() async {
var dbClient = await db;
List<Map> list = await dbClient.rawQuery('SELECT * FROM Picture');
List<Picture> pictures = [];
for (int i = 0; i < list.length; i++) {
pictures.add(new Picture(list[i]["id"], list[i]["text"], list[i]["picture"]));
}
return pictures;
}
}
renditdjalet_button.dart
this is the class witch contains the function to display the rating on the alert dialog
class RenditFjaletButton extends StatefulWidget {
RenditFjaletButton(
{required this.QuizList,
required this.AllQuizLists,
required this.CurrentIndex,
Key? key})
: super(key: key);
late List AllQuizLists;
late List QuizList;
late int CurrentIndex;
#override
State<RenditFjaletButton> createState() => _RenditFjaletButtonState();
}
class _RenditFjaletButtonState extends State<RenditFjaletButton> {
late DatabaseHandler handler;
late Future<List<QuizInfo>?> futureData;
List<QuizDescription> selectReportList = [];
List<String> selectedWords = [];
List<QuizDescription> quizList = [];
int _selectedChipsIndex = 0;
String starsRating = '';
late Timer timer;
int startTimer = 65;
String starsOnTimer = '';
late QuizInfo question;
void initState() {
super.initState();
futureData = fetchData1();
startTheTimer();
this.handler = DatabaseHandler();
}
onPressed: () async {
await showDialog(
barrierDismissible: false,
context: context,
builder: (_) => AlertDialog(
backgroundColor: Color(0xFF50CFFD),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(35.0),
),
),
content: Builder(
builder: (context) {
var height = MediaQuery.of(context).size.height;
var width = MediaQuery.of(context).size.width;
String joinedWords =
selectedWords.join(" ").toString();
String setRatingInAlert(int timerForAlert) { //function for rating
double halfTimeForAlert = timerForAlert / 2;
if (joinedWords ==
data[widget.CurrentIndex].sentence &&
startTimer > halfTimeForAlert) {
starsRating = 'assets/threestars_small.png';
} else if (joinedWords ==
data[widget.CurrentIndex].sentence &&
startTimer <= 1) {
starsRating = 'assets/onestar_small.png';
} else if (joinedWords == question.sentence &&
startTimer < halfTimeForAlert) {
starsRating = 'assets/twostars_small.png';
} else {
starsRating = 'assets/zerostars_small.png';
}
return starsRating;
}
where i need to show the rating same as the one in the alert
renditfjalet_screen.dart
body: FutureBuilder<List<QuizInfo>?>(
future: futureData,
builder: (context, snapshot) {
if (snapshot.hasData) {
List<QuizInfo>? data = snapshot.data;
data?.sort((a, b) => a.level.compareTo(b.level));
return Stack(
children: [
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage(
'assets/background.PNG',
),
fit: BoxFit.cover),
),
child: Padding(
padding: const EdgeInsets.all(12.0),
child: GridView.count(
crossAxisCount: 4,
children: List.generate(
data!.length,
(index) {
return InkWell(
overlayColor:
MaterialStateProperty.all(Colors.green),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => RenditFjaletButton(
QuizList: data[index].word,
AllQuizLists: data,
CurrentIndex: index,
),
),
);
},
child: Card(
elevation: 3.0,
margin: EdgeInsets.all(7.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0)),
child: Column(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Container(
child: Text(
'${data[index].level}',
style: GoogleFonts.fredokaOne(
textStyle: TextStyle(
fontSize: 30.0.sp,
color: Color(0xFF50CFFD),
),
),
)),
),
Container(
alignment: Alignment.center,
height: 30,
width: 65,
child: Image(
image: AssetImage('assets/threestars_small.png'), // here is where i want to show the rating, for now i just hardcoded it
),
),
],
),
),
);
},
),
),
),
),
],

Answer 1

You can convert an image to BASE64 and store image as a string in your database . Click there for more info