How to create a 15-line Qur'an with Usman Taha's calligraphy in Flutter?

Question

I want to make a Quran using the database and 604 fonts, but I can't make the lines

https://cdnquran.inoor.ir/fonts/moshaffonts/fonts.zip https://aminsedghi.iapp.ir/moshaf4.db[enter image description here](https://i.sstatic.net/bRG4p.jpg)

import 'dart:ffi';
import 'dart:io';
import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:path/path.dart';
import 'package:path_provider/path_provider.dart';
import 'package:sqflite_common_ffi/sqflite_ffi.dart';
import 'package:sqflite_common/sqlite_api.dart';

class Quran extends StatefulWidget {
  const Quran({Key? key});

  @override
  State<Quran> createState() => _QuranState();
}

class _QuranState extends State<Quran> {
  List<String> ayahs = [];

  double point = 100.0;

@override
void initState() {
  sql();
  super.initState();
}

void sql() async {
  sqfliteFfiInit();
  databaseFactory = databaseFactoryFfi;

  var documentsDirectory = await getApplicationDocumentsDirectory();
  var databasePath = '${documentsDirectory.path}/moshaf15.db';

  if (!(await File(databasePath).exists())) {
    ByteData data = await rootBundle.load('assets/db/moshaf15.db');
    List<int> bytes = data.buffer
        .asUint8List(data.offsetInBytes, data.lengthInBytes);
    await File(databasePath).writeAsBytes(bytes);
  }

  Database database = await openDatabase(databasePath);

  List<Map<String, dynamic>> result = await database.rawQuery(
    'SELECT * FROM glyph WHERE page_number = 264 ORDER BY line_number ASC',
  );

  for (var row in result) {
    String code = row['code'].toString();
    ayahs.add(code);
  }

  await database.close();
}
  @override
Widget build(BuildContext context) {
  double height = MediaQuery.of(context).size.height;
  double width = MediaQuery.of(context).size.width;
  double heightSunWidth = (height + width);

  return SafeArea(
    child: Scaffold(
      appBar: AppBar(
        title: Text(
          "بیت الاحزان",
          style: TextStyle(
            fontSize: heightSunWidth / 60,
            fontFamily: "Vazir-semibold",
          ),
        ),
        centerTitle: true,
        backgroundColor: Colors.green,
      ),
      body: ListView.builder(
        itemCount: (ayahs.length / 15).ceil(),
        itemBuilder: (context, index) {
          int startIndex = index * 15;
          int endIndex = startIndex + 15;
          List<String> subAyahs = ayahs.sublist(startIndex, endIndex);
          return Column(
            children: subAyahs.map((ayah) {
              return Text(
                String.fromCharCode(int.parse(ayah)),
                style: TextStyle(fontSize: 100, fontFamily: 'p264'),
              );
            }).toList(),
        bottomNavigationBar: BottomAppBar(
          clipBehavior: Clip.antiAlias,
          color: Colors.green,
          shape: CircularNotchedRectangle(),
          notchMargin: 5,
          height: 60,
          child: Row(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              PointButton(heightSunWidth, "تپق", 0.5),
              PointButton(heightSunWidth, "اعراب", 1.5),
              PointButton(heightSunWidth, "کلمه", 3.0),
              SizedBox(
                width: width / 10,
              ),
              PointButton(heightSunWidth, "جمله", 4.0),
              PointButton(heightSunWidth, "سر آیه", 4.0),
              PointButton(heightSunWidth, "سر صفحه", 5.0),
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          backgroundColor: Colors.green,
          child: Icon(Icons.check),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      ),
    );
  }

  Widget PointButton(
    double hw,
    String title,
    double point,
  ) {
    return Expanded(
      child: InkWell(
        onTap: () {
          setState(() {
            this.point -= point;
          });
        },
        child: Container(
          child: Center(
            child: Text(
              title,
              style: TextStyle(
                fontFamily: "Vazir-regular",
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

I want all the pages (604) to be moved on the page by dragging left and right, like the uploaded image, and all of them have 15 lines.

Answer 1

So let's tackle this one by one,

For have 15 lines, you need to tell your to have a max of 15 lines, preferably using this library auto_size_text.

As for having multiple pages that's achievable using a PageView, which give you exactly what you are looking at and you can write a custom transformer for the animation.

Last thing, to achieve a custom font, you need to put that font in your assets, add it to your pubspec, then changing the text style with the font family name

import 'package:flutter/material.dart';

/// Flutter code sample for [PageView].

void main() => runApp(const PageViewExampleApp());

class PageViewExampleApp extends StatelessWidget {
  const PageViewExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('PageView Sample')),
        body: const PageViewExample(),
      ),
    );
  }
}

class PageViewExample extends StatelessWidget {
  const PageViewExample({super.key});

  @override
  Widget build(BuildContext context) {
    final PageController controller = PageController();
    return PageView(
      /// [PageView.scrollDirection] defaults to [Axis.horizontal].
      /// Use [Axis.vertical] to scroll vertically.
      controller: controller,
      children: const <Widget>[
        Center(
          child: AutoSizeText(
          'Long Text Here',
          style: TextStyle(fontSize: 20),
          maxLines: 15,
           )
        ),
        Center(
          child: Text('Second Page'),
        ),
        Center(
          child: Text('Third Page'),
        ),
      ],
    );
  }
}