১. শুরু করার আগে
কল্পনা করুন যে আপনাকে জিজ্ঞাসা করা হচ্ছে যে বিশ্বের বৃহত্তম ক্রসওয়ার্ড ধাঁধা তৈরি করা সম্ভব কিনা। আপনি স্কুলে পড়া কিছু AI কৌশল মনে করেন এবং ভাবছেন যে আপনি কি Flutter ব্যবহার করে গণনামূলকভাবে তীব্র সমস্যার সমাধান তৈরি করার জন্য অ্যালগরিদমিক বিকল্পগুলি অন্বেষণ করতে পারেন?
এই কোডল্যাবে, আপনি ঠিক সেটাই করবেন। শেষ পর্যন্ত, আপনি ওয়ার্ড গ্রিড পাজল তৈরির জন্য অ্যালগরিদমের জায়গায় খেলার জন্য একটি টুল তৈরি করবেন। একটি বৈধ ক্রসওয়ার্ড পাজল কী তার অনেকগুলি ভিন্ন সংজ্ঞা রয়েছে এবং এই কৌশলগুলি আপনাকে আপনার সংজ্ঞা অনুসারে পাজল তৈরি করতে সাহায্য করবে।
এই টুলটিকে ভিত্তি হিসেবে ব্যবহার করে, আপনি একটি ক্রসওয়ার্ড ধাঁধা তৈরি করবেন যা ক্রসওয়ার্ড জেনারেটর ব্যবহার করে ব্যবহারকারীর সমাধানের জন্য ধাঁধাটি তৈরি করবে। এই ধাঁধাটি অ্যান্ড্রয়েড, আইওএস, উইন্ডোজ, ম্যাকওএস এবং লিনাক্সে ব্যবহারযোগ্য। এটি অ্যান্ড্রয়েডে এখানে:
পূর্বশর্ত
- আপনার প্রথম ফ্লাটার অ্যাপ কোডল্যাবের সমাপ্তি
তুমি যা শিখো
- ফ্লটারের
computeফাংশন এবং রিভারপডেরselectরিবিল্ড ফিল্টারের ভ্যালু-ক্যাশিং ক্ষমতার সংমিশ্রণের মাধ্যমে ফ্লটারের রেন্ডার লুপকে বাধাগ্রস্ত না করে গণনামূলকভাবে ব্যয়বহুল কাজ করার জন্য আইসোলেটগুলি কীভাবে ব্যবহার করবেন। - অনুসন্ধান-ভিত্তিক গুড ওল্ড ফ্যাশনড এআই (GOFAI) কৌশল যেমন ডেপথ-ফার্স্ট সার্চ এবং ব্যাকট্র্যাকিং বাস্তবায়নের জন্য
built_valueএবংbuilt_collectionসহ অপরিবর্তনীয় ডেটা স্ট্রাকচারের সুবিধা কীভাবে নেওয়া যায়। - দ্রুত এবং স্বজ্ঞাত উপায়ে গ্রিড ডেটা প্রদর্শনের জন্য
two_dimensional_scrollablesপ্যাকেজের ক্ষমতাগুলি কীভাবে ব্যবহার করবেন।
তোমার যা দরকার
- ফ্লাটার এসডিকে ।
- ফ্লাটার এবং ডার্ট প্লাগইন সহ ভিজ্যুয়াল স্টুডিও কোড (ভিএস কোড)।
- আপনার নির্বাচিত ডেভেলপমেন্ট টার্গেটের জন্য কম্পাইলার সফটওয়্যার। এই কোডল্যাবটি অ্যান্ড্রয়েড এবং iOS সহ সকল ডেস্কটপ প্ল্যাটফর্মের জন্য কাজ করে। উইন্ডোজকে টার্গেট করার জন্য আপনার VS কোড, ম্যাকওএস বা iOSকে টার্গেট করার জন্য Xcode এবং অ্যান্ড্রয়েডকে টার্গেট করার জন্য Android Studio প্রয়োজন।
2. একটি প্রকল্প তৈরি করুন
আপনার প্রথম ফ্লাটার প্রকল্প তৈরি করুন
- VS কোড চালু করুন।
- কমান্ড প্যালেটটি খুলুন (উইন্ডোজ/লিনাক্সে Ctrl+Shift+P, ম্যাকওএসে Cmd+Shift+P), "flutter new" টাইপ করুন এবং তারপর মেনুতে Flutter: New Project নির্বাচন করুন।
- "Empty application" নির্বাচন করুন এবং তারপর এমন একটি ডিরেক্টরি নির্বাচন করুন যেখানে আপনার প্রকল্প তৈরি করবেন। এটি এমন কোনও ডিরেক্টরি হওয়া উচিত যার জন্য উন্নত সুবিধার প্রয়োজন হয় না বা এর পথে কোনও স্থান থাকে না। উদাহরণগুলির মধ্যে রয়েছে আপনার হোম ডিরেক্টরি বা
C:\src\।
- আপনার প্রোজেক্টের নাম দিন
generate_crossword। এই কোডল্যাবের বাকি অংশ ধরে নেওয়া হচ্ছে যে আপনি আপনার অ্যাপের নাম দিয়েছেনgenerate_crossword।
Flutter এখন আপনার প্রোজেক্ট ফোল্ডার তৈরি করে এবং VS Code এটি খোলে। এখন আপনি অ্যাপের একটি বেসিক স্ক্যাফোল্ড দিয়ে দুটি ফাইলের বিষয়বস্তু ওভাররাইট করবেন।
প্রাথমিক অ্যাপটি কপি করে পেস্ট করুন।
- VS Code এর বাম দিকের ফলকে, Explorer এ ক্লিক করুন এবং
pubspec.yamlফাইলটি খুলুন।
- ক্রসওয়ার্ড তৈরির জন্য প্রয়োজনীয় নিম্নলিখিত নির্ভরতাগুলি দিয়ে এই ফাইলের বিষয়বস্তু প্রতিস্থাপন করুন:
অনুসরণ
name: generate_crossword
description: "A new Flutter project."
publish_to: 'none'
version: 0.1.0
environment:
sdk: ^3.9.0
dependencies:
flutter:
sdk: flutter
built_collection: ^5.1.1
built_value: ^8.10.1
characters: ^1.4.0
flutter_riverpod: ^2.6.1
intl: ^0.20.2
riverpod: ^2.6.1
riverpod_annotation: ^2.6.1
two_dimensional_scrollables: ^0.3.7
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^5.0.0
build_runner: ^2.5.4
built_value_generator: ^8.10.1
custom_lint: ^0.7.6
riverpod_generator: ^2.6.5
riverpod_lint: ^2.6.5
flutter:
uses-material-design: true
pubspec.yaml ফাইলটি আপনার অ্যাপ সম্পর্কে মৌলিক তথ্য নির্দিষ্ট করে, যেমন এর বর্তমান সংস্করণ এবং এর নির্ভরতা। আপনি এমন নির্ভরতার একটি সংগ্রহ দেখতে পাবেন যা একটি সাধারণ খালি Flutter অ্যাপের অংশ নয়। আগামী ধাপগুলিতে আপনি এই সমস্ত প্যাকেজ থেকে উপকৃত হবেন।
নির্ভরতা বোঝা
কোডে ডুব দেওয়ার আগে, আসুন জেনে নেওয়া যাক কেন এই নির্দিষ্ট প্যাকেজগুলি বেছে নেওয়া হয়েছে:
- built_value : অপরিবর্তনীয় বস্তু তৈরি করে যা দক্ষতার সাথে মেমরি ভাগ করে নেয়, যা আমাদের ব্যাকট্র্যাকিং অ্যালগরিদমের জন্য অত্যন্ত গুরুত্বপূর্ণ।
- রিভারপড : পুনর্নির্মাণ কমাতে
select()সহ সূক্ষ্মভাবে স্টেট ম্যানেজমেন্ট প্রদান করে। - two_dimensional_scrollables : পারফরম্যান্স জরিমানা ছাড়াই বড় গ্রিড পরিচালনা করে
-
lib/ডিরেক্টরিতেmain.dartফাইলটি খুলুন।
- এই ফাইলের বিষয়বস্তু নিম্নলিখিত দিয়ে প্রতিস্থাপন করুন:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
void main() {
runApp(
ProviderScope(
child: MaterialApp(
title: 'Crossword Builder',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorSchemeSeed: Colors.blueGrey,
brightness: Brightness.light,
),
home: Scaffold(
body: Center(
child: Text('Hello, World!', style: TextStyle(fontSize: 24)),
),
),
),
),
);
}
- সবকিছু ঠিকঠাক কাজ করছে কিনা তা পরীক্ষা করার জন্য এই কোডটি চালান। এটিতে একটি নতুন উইন্ডো প্রদর্শিত হবে যেখানে প্রতিটি নতুন প্রকল্পের শুরুতে বাধ্যতামূলক বাক্যাংশটি থাকবে। একটি
ProviderScopeআছে যা নির্দেশ করে যে এই অ্যাপটি রাষ্ট্র পরিচালনার জন্যriverpodব্যবহার করবে।
চেকপয়েন্ট: বেসিক অ্যাপ রানিং
এই মুহুর্তে, আপনার "হ্যালো, ওয়ার্ল্ড!" উইন্ডোটি দেখা উচিত। যদি না হয়:
- Flutter সঠিকভাবে ইনস্টল করা আছে কিনা তা পরীক্ষা করুন।
-
flutter runদিয়ে অ্যাপটি রান করছে কিনা তা যাচাই করুন - টার্মিনালে কোন সংকলন ত্রুটি নেই তা নিশ্চিত করুন।
৩. শব্দ যোগ করুন
ক্রসওয়ার্ড ধাঁধার জন্য বিল্ডিং ব্লক
একটি ক্রসওয়ার্ড হলো শব্দের একটি তালিকা। শব্দগুলো একটি গ্রিডে সাজানো থাকে, কিছু জুড়ে, কিছু নিচে, যাতে শব্দগুলো একে অপরের সাথে সংযুক্ত থাকে। একটি শব্দ সমাধান করলে প্রথম শব্দটিকে অতিক্রমকারী শব্দগুলির একটি সূত্র পাওয়া যায়। সুতরাং, একটি ভালো প্রথম উপাদান হল শব্দের একটি তালিকা।
এই শব্দগুলির একটি ভালো উৎস হল পিটার নরভিগের ন্যাচারাল ল্যাঙ্গুয়েজ কর্পাস ডেটা পৃষ্ঠা। SOWPODS তালিকাটি একটি কার্যকর সূচনা বিন্দু, যেখানে 267,750টি শব্দ রয়েছে।
এই ধাপে, আপনি শব্দের একটি তালিকা ডাউনলোড করুন, এটি আপনার Flutter অ্যাপে একটি সম্পদ হিসেবে যোগ করুন এবং স্টার্টআপের সময় অ্যাপে তালিকাটি লোড করার জন্য একটি Riverpod প্রদানকারীর ব্যবস্থা করুন।
শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- আপনার নির্বাচিত শব্দ তালিকার জন্য নিম্নলিখিত সম্পদ ঘোষণা যোগ করতে আপনার প্রকল্পের
pubspec.yamlফাইলটি পরিবর্তন করুন। এই তালিকাটি আপনার অ্যাপের কনফিগারেশনের শুধুমাত্র ফ্লটার স্টানজা দেখায়, কারণ বাকিগুলি একই রয়ে গেছে।
অনুসরণ
flutter:
uses-material-design: true
assets: # Add this line
- assets/words.txt # And this one.
আপনার সম্পাদক সম্ভবত এই শেষ লাইনটি একটি সতর্কতা সহ হাইলাইট করবেন কারণ আপনি এখনও এই ফাইলটি তৈরি করেননি।
- আপনার ব্রাউজার এবং আপনার সম্পাদক ব্যবহার করে, আপনার প্রকল্পের শীর্ষ স্তরে একটি
assetsডিরেক্টরি তৈরি করুন এবং পূর্বে লিঙ্ক করা শব্দ তালিকাগুলির একটি সহ একটিwords.txtফাইল তৈরি করুন।
এই কোডটি পূর্বে উল্লিখিত SOWPODS তালিকা ব্যবহার করে ডিজাইন করা হয়েছে, তবে এটি শুধুমাত্র AZ অক্ষর সমন্বিত যেকোনো শব্দ তালিকার সাথে কাজ করবে। বিভিন্ন অক্ষর সেটের সাথে কাজ করার জন্য এই কোডবেসটি প্রসারিত করা পাঠকের জন্য একটি অনুশীলন হিসাবে ছেড়ে দেওয়া হয়েছে।
শব্দগুলো লোড করো।
অ্যাপ স্টার্টআপে শব্দ তালিকা লোড করার জন্য দায়ী কোডটি লিখতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
libডিরেক্টরিতে একটিproviders.dartফাইল তৈরি করুন। - ফাইলটিতে নিম্নলিখিতটি যোগ করুন:
lib/providers.dart সম্পর্কে
import 'dart:convert';
import 'package:built_collection/built_collection.dart';
import 'package:flutter/services.dart';
import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
part 'providers.g.dart';
/// A provider for the wordlist to use when generating the crossword.
@riverpod
Future<BuiltSet<String>> wordList(Ref ref) async {
// This codebase requires that all words consist of lowercase characters
// in the range 'a'-'z'. Words containing uppercase letters will be
// lowercased, and words containing runes outside this range will
// be removed.
final re = RegExp(r'^[a-z]+$');
final words = await rootBundle.loadString('assets/words.txt');
return const LineSplitter()
.convert(words)
.toBuiltSet()
.rebuild(
(b) => b
..map((word) => word.toLowerCase().trim())
..where((word) => word.length > 2)
..where((word) => re.hasMatch(word)),
);
}
এই কোডবেসের জন্য এটি আপনার প্রথম রিভারপড সরবরাহকারী।
এই প্রদানকারী কীভাবে কাজ করে:
- অ্যাসেট থেকে শব্দ তালিকাটি অ্যাসিঙ্ক্রোনাসভাবে লোড করে
- শুধুমাত্র ২ অক্ষরের চেয়ে লম্বা az অক্ষর অন্তর্ভুক্ত করার জন্য শব্দ ফিল্টার করে।
- দক্ষ র্যান্ডম অ্যাক্সেসের জন্য একটি অপরিবর্তনীয়
BuiltSetপ্রদান করে।
এই প্রকল্পটি রিভারপড সহ একাধিক নির্ভরতার জন্য কোড জেনারেশন ব্যবহার করে।
- কোড তৈরি শুরু করতে, নিম্নলিখিত কমান্ডটি চালান:
$ dart run build_runner watch -d [INFO] Generating build script completed, took 174ms [INFO] Setting up file watchers completed, took 5ms [INFO] Waiting for all file watchers to be ready completed, took 202ms [INFO] Reading cached asset graph completed, took 65ms [INFO] Checking for updates since last build completed, took 680ms [INFO] Running build completed, took 2.3s [INFO] Caching finalized dependency graph completed, took 42ms [INFO] Succeeded after 2.3s with 122 outputs (243 actions)
এটি ব্যাকগ্রাউন্ডে চলতে থাকবে, আপনি প্রকল্পে পরিবর্তন করার সাথে সাথে জেনারেট করা ফাইলগুলি আপডেট করবে। একবার এই কমান্ডটি providers.g.dart এ কোড তৈরি করে ফেললে, আপনার সম্পাদক providers.dart এ যোগ করা কোডটি নিয়ে খুশি হবেন।
রিভারপডে, পূর্বে সংজ্ঞায়িত wordList ফাংশনের মতো প্রোভাইডারগুলি সাধারণত অলসভাবে তাৎক্ষণিকভাবে চালু করা হয়। তবে, এই অ্যাপের উদ্দেশ্যে, আপনাকে word list কে আগ্রহের সাথে লোড করতে হবে। রিভারপড ডকুমেন্টেশনে যেসব প্রোভাইডারকে আগ্রহের সাথে লোড করতে হবে তাদের সাথে কাজ করার জন্য নিম্নলিখিত পদ্ধতির পরামর্শ দেওয়া হয়েছে। আপনি এখন এটি বাস্তবায়ন করবেন।
- একটি
lib/widgetsডিরেক্টরিতে একটিcrossword_generator_app.dartফাইল তৈরি করুন। - ফাইলটিতে নিম্নলিখিতটি যোগ করুন:
lib/উইজেটস/ক্রসওয়ার্ড_জেনারেটর_অ্যাপ.ডার্ট
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers.dart';
class CrosswordGeneratorApp extends StatelessWidget {
const CrosswordGeneratorApp({super.key});
@override
Widget build(BuildContext context) {
return _EagerInitialization(
child: Scaffold(
appBar: AppBar(
titleTextStyle: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
title: Text('Crossword Generator'),
),
body: SafeArea(
child: Consumer(
builder: (context, ref, _) {
final wordListAsync = ref.watch(wordListProvider);
return wordListAsync.when(
data: (wordList) => ListView.builder(
itemCount: wordList.length,
itemBuilder: (context, index) {
return ListTile(title: Text(wordList.elementAt(index)));
},
),
error: (error, stackTrace) => Center(child: Text('$error')),
loading: () => Center(child: CircularProgressIndicator()),
);
},
),
),
),
);
}
}
class _EagerInitialization extends ConsumerWidget {
const _EagerInitialization({required this.child});
final Widget child;
@override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(wordListProvider);
return child;
}
}
এই ফাইলটি দুটি ভিন্ন দিক থেকে আকর্ষণীয়। প্রথমটি হল _EagerInitialization উইজেট, যার একমাত্র লক্ষ্য হল শব্দ তালিকা লোড করার জন্য আপনার পূর্বে তৈরি করা wordList প্রদানকারীকে বাধ্য করা। এই উইজেটটি ref.watch() কল ব্যবহার করে প্রদানকারীর কথা শুনে এই উদ্দেশ্য অর্জন করে। আপনি এই কৌশল সম্পর্কে আরও পড়তে পারেন Riverpod ডকুমেন্টেশনে Eager initialization of providers .
এই ফাইলে দ্বিতীয় আকর্ষণীয় বিষয়টি লক্ষ্য করার মতো, রিভারপড কীভাবে অ্যাসিঙ্ক্রোনাস কন্টেন্ট পরিচালনা করে। আপনার মনে থাকতে পারে, wordList প্রোভাইডারকে একটি অ্যাসিঙ্ক্রোনাস ফাংশন হিসেবে সংজ্ঞায়িত করা হয়েছে, কারণ ডিস্ক থেকে কন্টেন্ট লোড করার প্রক্রিয়া ধীর। এই কোডে word list provider দেখার সময়, আপনি একটি AsyncValue<BuiltSet<String>> পাবেন। এই ধরণের AsyncValue অংশটি হল অ্যাসিঙ্ক্রোনাস ওয়ার্ল্ড অফ প্রোভাইডার এবং উইজেটের build পদ্ধতির সিঙ্ক্রোনাস ওয়ার্ল্ডের মধ্যে একটি অ্যাডাপ্টার।
AsyncValue এর when পদ্ধতিটি তিনটি সম্ভাব্য অবস্থা পরিচালনা করে যেখানে ভবিষ্যতের মান থাকতে পারে। ভবিষ্যতের সমাধান সফলভাবে করা হতে পারে, যে ক্ষেত্রে data কলব্যাক আহ্বান করা হয়, এটি একটি ত্রুটি অবস্থায় থাকতে পারে, যে ক্ষেত্রে error কলব্যাক আহ্বান করা হয়, অথবা অবশেষে এটি এখনও লোড হচ্ছে। তিনটি কলব্যাকের রিটার্ন প্রকারের অবশ্যই সামঞ্জস্যপূর্ণ রিটার্ন প্রকার থাকতে হবে, কারণ কল করা কলব্যাকের রিটার্ন when পদ্ধতি দ্বারা ফেরত পাঠানো হয়। এই ক্ষেত্রে, when পদ্ধতির ফলাফল Scaffold উইজেটের body হিসাবে প্রদর্শিত হয়।
একটি প্রায় অসীম তালিকা অ্যাপ তৈরি করুন
আপনার অ্যাপে CrosswordGeneratorApp উইজেট সংহত করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
- নিম্নলিখিত কোডটি যোগ করে
lib/main.dartফাইলটি আপডেট করুন:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'widgets/crossword_generator_app.dart'; // Add this import
void main() {
runApp(
ProviderScope(
child: MaterialApp(
title: 'Crossword Builder',
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorSchemeSeed: Colors.blueGrey,
brightness: Brightness.light,
),
home: CrosswordGeneratorApp(), // Remove what was here and replace
),
),
);
}
- অ্যাপটি পুনরায় চালু করুন। আপনি একটি স্ক্রলিং তালিকা দেখতে পাবেন যা অভিধানের সমস্ত 267,750+ শব্দের মধ্য দিয়ে যাবে।
আপনি পরবর্তীতে কী তৈরি করবেন
এখন তুমি তোমার ক্রসওয়ার্ড পাজলের জন্য অপরিবর্তনীয় বস্তু ব্যবহার করে মূল ডেটা স্ট্রাকচার তৈরি করবে। এই ভিত্তিটি দক্ষ অ্যালগরিদম এবং মসৃণ UI আপডেট সক্ষম করবে।
৪. শব্দগুলিকে একটি গ্রিডে প্রদর্শন করুন
এই ধাপে, আপনি built_value এবং built_collection প্যাকেজ ব্যবহার করে একটি ক্রসওয়ার্ড পাজল তৈরির জন্য একটি ডেটা স্ট্রাকচার তৈরি করবেন। এই দুটি প্যাকেজ অপরিবর্তনীয় মান হিসেবে ডেটা স্ট্রাকচার তৈরি করতে সক্ষম করে, যা Isolates-এর মধ্যে ডেটা পাস করার জন্য এবং depth first search এবং backtracking বাস্তবায়নকে অনেক সহজ করে তোলার জন্য কার্যকর হবে।
শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
libডিরেক্টরিতে একটিmodel.dartফাইল তৈরি করুন এবং তারপর ফাইলটিতে নিম্নলিখিত বিষয়বস্তু যোগ করুন:
lib/model.dart
import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';
import 'package:characters/characters.dart';
part 'model.g.dart';
/// A location in a crossword.
abstract class Location implements Built<Location, LocationBuilder> {
static Serializer<Location> get serializer => _$locationSerializer;
/// The horizontal part of the location. The location is 0 based.
int get x;
/// The vertical part of the location. The location is 0 based.
int get y;
/// Returns a new location that is one step to the left of this location.
Location get left => rebuild((b) => b.x = x - 1);
/// Returns a new location that is one step to the right of this location.
Location get right => rebuild((b) => b.x = x + 1);
/// Returns a new location that is one step up from this location.
Location get up => rebuild((b) => b.y = y - 1);
/// Returns a new location that is one step down from this location.
Location get down => rebuild((b) => b.y = y + 1);
/// Returns a new location that is [offset] steps to the left of this location.
Location leftOffset(int offset) => rebuild((b) => b.x = x - offset);
/// Returns a new location that is [offset] steps to the right of this location.
Location rightOffset(int offset) => rebuild((b) => b.x = x + offset);
/// Returns a new location that is [offset] steps up from this location.
Location upOffset(int offset) => rebuild((b) => b.y = y - offset);
/// Returns a new location that is [offset] steps down from this location.
Location downOffset(int offset) => rebuild((b) => b.y = y + offset);
/// Pretty print a location as a (x,y) coordinate.
String prettyPrint() => '($x,$y)';
/// Returns a new location built from [updates]. Both [x] and [y] are
/// required to be non-null.
factory Location([void Function(LocationBuilder)? updates]) = _$Location;
Location._();
/// Returns a location at the given coordinates.
factory Location.at(int x, int y) {
return Location((b) {
b
..x = x
..y = y;
});
}
}
/// The direction of a word in a crossword.
enum Direction {
across,
down;
@override
String toString() => name;
}
/// A word in a crossword. This is a word at a location in a crossword, in either
/// the across or down direction.
abstract class CrosswordWord
implements Built<CrosswordWord, CrosswordWordBuilder> {
static Serializer<CrosswordWord> get serializer => _$crosswordWordSerializer;
/// The word itself.
String get word;
/// The location of this word in the crossword.
Location get location;
/// The direction of this word in the crossword.
Direction get direction;
/// Compare two CrosswordWord by coordinates, x then y.
static int locationComparator(CrosswordWord a, CrosswordWord b) {
final compareRows = a.location.y.compareTo(b.location.y);
final compareColumns = a.location.x.compareTo(b.location.x);
return switch (compareColumns) {
0 => compareRows,
_ => compareColumns,
};
}
/// Constructor for [CrosswordWord].
factory CrosswordWord.word({
required String word,
required Location location,
required Direction direction,
}) {
return CrosswordWord(
(b) => b
..word = word
..direction = direction
..location.replace(location),
);
}
/// Constructor for [CrosswordWord].
/// Use [CrosswordWord.word] instead.
factory CrosswordWord([void Function(CrosswordWordBuilder)? updates]) =
_$CrosswordWord;
CrosswordWord._();
}
/// A character in a crossword. This is a single character at a location in a
/// crossword. It may be part of an across word, a down word, both, but not
/// neither. The neither constraint is enforced elsewhere.
abstract class CrosswordCharacter
implements Built<CrosswordCharacter, CrosswordCharacterBuilder> {
static Serializer<CrosswordCharacter> get serializer =>
_$crosswordCharacterSerializer;
/// The character at this location.
String get character;
/// The across word that this character is a part of.
CrosswordWord? get acrossWord;
/// The down word that this character is a part of.
CrosswordWord? get downWord;
/// Constructor for [CrosswordCharacter].
/// [acrossWord] and [downWord] are optional.
factory CrosswordCharacter.character({
required String character,
CrosswordWord? acrossWord,
CrosswordWord? downWord,
}) {
return CrosswordCharacter((b) {
b.character = character;
if (acrossWord != null) {
b.acrossWord.replace(acrossWord);
}
if (downWord != null) {
b.downWord.replace(downWord);
}
});
}
/// Constructor for [CrosswordCharacter].
/// Use [CrosswordCharacter.character] instead.
factory CrosswordCharacter([
void Function(CrosswordCharacterBuilder)? updates,
]) = _$CrosswordCharacter;
CrosswordCharacter._();
}
/// A crossword puzzle. This is a grid of characters with words placed in it.
/// The puzzle constraint is in the English crossword puzzle tradition.
abstract class Crossword implements Built<Crossword, CrosswordBuilder> {
/// Serializes and deserializes the [Crossword] class.
static Serializer<Crossword> get serializer => _$crosswordSerializer;
/// Width across the [Crossword] puzzle.
int get width;
/// Height down the [Crossword] puzzle.
int get height;
/// The words in the crossword.
BuiltList<CrosswordWord> get words;
/// The characters by location. Useful for displaying the crossword.
BuiltMap<Location, CrosswordCharacter> get characters;
/// Add a word to the crossword at the given location and direction.
Crossword addWord({
required Location location,
required String word,
required Direction direction,
}) {
return rebuild(
(b) => b
..words.add(
CrosswordWord.word(
word: word,
direction: direction,
location: location,
),
),
);
}
/// As a finalize step, fill in the characters map.
@BuiltValueHook(finalizeBuilder: true)
static void _fillCharacters(CrosswordBuilder b) {
b.characters.clear();
for (final word in b.words.build()) {
for (final (idx, character) in word.word.characters.indexed) {
switch (word.direction) {
case Direction.across:
b.characters.updateValue(
word.location.rightOffset(idx),
(b) => b.rebuild((bInner) => bInner.acrossWord.replace(word)),
ifAbsent: () => CrosswordCharacter.character(
acrossWord: word,
character: character,
),
);
case Direction.down:
b.characters.updateValue(
word.location.downOffset(idx),
(b) => b.rebuild((bInner) => bInner.downWord.replace(word)),
ifAbsent: () => CrosswordCharacter.character(
downWord: word,
character: character,
),
);
}
}
}
}
/// Pretty print a crossword. Generates the character grid, and lists
/// the down words and across words sorted by location.
String prettyPrintCrossword() {
final buffer = StringBuffer();
final grid = List.generate(
height,
(_) => List.generate(
width,
(_) => '░', // https://www.compart.com/en/unicode/U+2591
),
);
for (final MapEntry(key: Location(:x, :y), value: character)
in characters.entries) {
grid[y][x] = character.character;
}
for (final row in grid) {
buffer.writeln(row.join());
}
buffer.writeln();
buffer.writeln('Across:');
for (final word
in words.where((word) => word.direction == Direction.across).toList()
..sort(CrosswordWord.locationComparator)) {
buffer.writeln('${word.location.prettyPrint()}: ${word.word}');
}
buffer.writeln();
buffer.writeln('Down:');
for (final word
in words.where((word) => word.direction == Direction.down).toList()
..sort(CrosswordWord.locationComparator)) {
buffer.writeln('${word.location.prettyPrint()}: ${word.word}');
}
return buffer.toString();
}
/// Constructor for [Crossword].
factory Crossword.crossword({
required int width,
required int height,
Iterable<CrosswordWord>? words,
}) {
return Crossword((b) {
b
..width = width
..height = height;
if (words != null) {
b.words.addAll(words);
}
});
}
/// Constructor for [Crossword].
/// Use [Crossword.crossword] instead.
factory Crossword([void Function(CrosswordBuilder)? updates]) = _$Crossword;
Crossword._();
}
/// Construct the serialization/deserialization code for the data model.
@SerializersFor([Location, Crossword, CrosswordWord, CrosswordCharacter])
final Serializers serializers = _$serializers;
এই ফাইলটি ক্রসওয়ার্ড তৈরির জন্য আপনি যে ডেটা স্ট্রাকচারটি ব্যবহার করবেন তার শুরু বর্ণনা করে। এর মূলে, একটি ক্রসওয়ার্ড পাজল হল একটি গ্রিডে সংযুক্ত অনুভূমিক এবং উল্লম্ব শব্দের একটি তালিকা। এই ডেটা স্ট্রাকচারটি ব্যবহার করার জন্য, আপনাকে Crossword.crossword নামক কনস্ট্রাক্টর ব্যবহার করে উপযুক্ত আকারের একটি Crossword তৈরি করতে হবে, তারপর আপনি addWord পদ্ধতি ব্যবহার করে শব্দ যোগ করতে হবে। চূড়ান্ত মান তৈরির অংশ হিসাবে, _fillCharacters পদ্ধতি দ্বারা CrosswordCharacter s এর একটি গ্রিড তৈরি করা হয়।
এই ডেটা স্ট্রাকচারটি ব্যবহার করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
libডিরেক্টরিতে একটিutilsফাইল তৈরি করুন এবং তারপর ফাইলটিতে নিম্নলিখিত বিষয়বস্তু যোগ করুন:
lib/utils.dart সম্পর্কে
import 'dart:math';
import 'package:built_collection/built_collection.dart';
/// A [Random] instance for generating random numbers.
final _random = Random();
/// An extension on [BuiltSet] that adds a method to get a random element.
extension RandomElements<E> on BuiltSet<E> {
E randomElement() {
return elementAt(_random.nextInt(length));
}
}
এটি BuiltSet এর একটি এক্সটেনশন যা সেটের একটি এলোমেলো উপাদান পুনরুদ্ধার করা সহজ করে তোলে। এক্সটেনশন পদ্ধতিগুলি অতিরিক্ত কার্যকারিতা সহ ক্লাসগুলি প্রসারিত করার একটি ভাল উপায়। utils.dart ফাইলের বাইরে এক্সটেনশনটি উপলব্ধ করার জন্য এক্সটেনশনটির নামকরণ করা প্রয়োজন।
- আপনার
lib/providers.dartফাইলে, নিম্নলিখিত আমদানিগুলি যোগ করুন:
lib/providers.dart সম্পর্কে
import 'dart:convert';
import 'dart:math'; // Add this import
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart'; // Add this import
import 'package:flutter/services.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'model.dart' as model; // And this import
import 'utils.dart'; // And this one
part 'providers.g.dart';
/// A provider for the wordlist to use when generating the crossword.
@riverpod
Future<BuiltSet<String>> wordList(WordListRef ref) async {
এই আমদানিগুলি পূর্বে সংজ্ঞায়িত মডেলটি আপনার তৈরি করা প্রোভাইডারদের কাছে প্রকাশ করে। Random এর জন্য dart:math আমদানি অন্তর্ভুক্ত করা হয়েছে, debugPrint জন্য flutter/foundation.dart আমদানি অন্তর্ভুক্ত করা হয়েছে, মডেলের জন্য model.dart এবং BuiltSet এক্সটেনশনের জন্য utils.dart হয়েছে।
- একই ফাইলের শেষে, নিম্নলিখিত প্রদানকারীগুলি যোগ করুন:
lib/providers.dart সম্পর্কে
/// An enumeration for different sizes of [model.Crossword]s.
enum CrosswordSize {
small(width: 20, height: 11),
medium(width: 40, height: 22),
large(width: 80, height: 44),
xlarge(width: 160, height: 88),
xxlarge(width: 500, height: 500);
const CrosswordSize({required this.width, required this.height});
final int width;
final int height;
String get label => '$width x $height';
}
/// A provider that holds the current size of the crossword to generate.
@Riverpod(keepAlive: true)
class Size extends _$Size {
var _size = CrosswordSize.medium;
@override
CrosswordSize build() => _size;
void setSize(CrosswordSize size) {
_size = size;
ref.invalidateSelf();
}
}
final _random = Random();
@riverpod
Stream<model.Crossword> crossword(Ref ref) async* {
final size = ref.watch(sizeProvider);
final wordListAsync = ref.watch(wordListProvider);
var crossword = model.Crossword.crossword(
width: size.width,
height: size.height,
);
yield* wordListAsync.when(
data: (wordList) async* {
while (crossword.characters.length < size.width * size.height * 0.8) {
final word = wordList.randomElement();
final direction = _random.nextBool()
? model.Direction.across
: model.Direction.down;
final location = model.Location.at(
_random.nextInt(size.width),
_random.nextInt(size.height),
);
crossword = crossword.addWord(
word: word,
direction: direction,
location: location,
);
yield crossword;
await Future.delayed(Duration(milliseconds: 100));
}
yield crossword;
},
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield crossword;
},
loading: () async* {
yield crossword;
},
);
}
এই পরিবর্তনগুলি আপনার অ্যাপে দুটি প্রোভাইডার যুক্ত করে। প্রথমটি হল Size , যা কার্যকরভাবে একটি গ্লোবাল ভ্যারিয়েবল যা CrosswordSize গণনার নির্বাচিত মান ধারণ করে। এটি UI কে নির্মাণাধীন ক্রসওয়ার্ডের আকার প্রদর্শন এবং সেট উভয়ই করার অনুমতি দেবে। দ্বিতীয় প্রোভাইডার, crossword , একটি আরও আকর্ষণীয় সৃষ্টি। এটি একটি ফাংশন যা Crossword একটি সিরিজ ফেরত দেয়। এটি ফাংশনে async* দ্বারা চিহ্নিত জেনারেটরের জন্য Dart এর সমর্থন ব্যবহার করে তৈরি করা হয়েছে। এর অর্থ হল রিটার্নে শেষ হওয়ার পরিবর্তে, এটি Crossword একটি সিরিজ দেয়, যা একটি গণনা লেখার একটি অনেক সহজ উপায় যা মধ্যবর্তী ফলাফল ফেরত দেয়।
crossword প্রোভাইডার ফাংশনের শুরুতে একজোড়া ref.watch কলের উপস্থিতির কারণে, প্রতিবার ক্রসওয়ার্ডের নির্বাচিত আকার পরিবর্তন হলে এবং শব্দ তালিকা লোড করা শেষ হলে Riverpod সিস্টেম দ্বারা Crossword স্ট্রিম পুনরায় চালু হবে।
এখন যেহেতু আপনার কাছে ক্রসওয়ার্ড তৈরি করার কোড আছে, যদিও এলোমেলো শব্দে ভরা, তাই টুলটির ব্যবহারকারীকে সেগুলি দেখানো ভালো হবে।
-
lib/widgetsডিরেক্টরিতে নিম্নলিখিত বিষয়বস্তু সহ একটিcrossword_widget.dartফাইল তৈরি করুন:
lib/উইজেটস/ক্রসওয়ার্ড_উইজেট.ডার্ট
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:two_dimensional_scrollables/two_dimensional_scrollables.dart';
import '../model.dart';
import '../providers.dart';
class CrosswordWidget extends ConsumerWidget {
const CrosswordWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final size = ref.watch(sizeProvider);
return TableView.builder(
diagonalDragBehavior: DiagonalDragBehavior.free,
cellBuilder: _buildCell,
columnCount: size.width,
columnBuilder: (index) => _buildSpan(context, index),
rowCount: size.height,
rowBuilder: (index) => _buildSpan(context, index),
);
}
TableViewCell _buildCell(BuildContext context, TableVicinity vicinity) {
final location = Location.at(vicinity.column, vicinity.row);
return TableViewCell(
child: Consumer(
builder: (context, ref, _) {
final character = ref.watch(
crosswordProvider.select(
(crosswordAsync) => crosswordAsync.when(
data: (crossword) => crossword.characters[location],
error: (error, stackTrace) => null,
loading: () => null,
),
),
);
if (character != null) {
return Container(
color: Theme.of(context).colorScheme.onPrimary,
child: Center(
child: Text(
character.character,
style: TextStyle(
fontSize: 24,
color: Theme.of(context).colorScheme.primary,
),
),
),
);
}
return ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
);
},
),
);
}
TableSpan _buildSpan(BuildContext context, int index) {
return TableSpan(
extent: FixedTableSpanExtent(32),
foregroundDecoration: TableSpanDecoration(
border: TableSpanBorder(
leading: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
trailing: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
),
);
}
}
এই উইজেটটি, একটি ConsumerWidget হওয়ায়, Crossword অক্ষরগুলি প্রদর্শনের জন্য গ্রিডের আকার নির্ধারণের জন্য সরাসরি Size প্রদানকারীর উপর নির্ভর করতে পারে। এই গ্রিডের প্রদর্শন two_dimensional_scrollables প্যাকেজের TableView উইজেটের মাধ্যমে সম্পন্ন করা হয়।
এটি লক্ষণীয় যে _buildCell হেল্পার ফাংশন দ্বারা রেন্ডার করা প্রতিটি পৃথক কোষ তাদের রিটার্ন করা Widget ট্রিতে একটি Consumer উইজেট ধারণ করে। এটি একটি রিফ্রেশ সীমানা হিসাবে কাজ করে। ref.watch এর রিটার্ন করা মান পরিবর্তন হলে Consumer উইজেটের ভিতরের সবকিছু পুনরায় তৈরি করা হয়। প্রতিবার Crossword পরিবর্তন করলে পুরো ট্রিটি পুনরায় তৈরি করা প্রলুব্ধকর, তবে এর ফলে অনেক গণনা করা হয় যা এই সেটআপ ব্যবহার করে এড়িয়ে যাওয়া যেতে পারে।
যদি আপনি ref.watch এর প্যারামিটারটি দেখেন, তাহলে আপনি দেখতে পাবেন যে crosswordProvider.select ব্যবহার করে রিকম্পিউটিং লেআউট এড়ানোর আরেকটি স্তর রয়েছে। এর মানে হল যে ref.watch শুধুমাত্র তখনই TableViewCell এর বিষয়বস্তু পুনর্নির্মাণ শুরু করবে যখন সেলটি রেন্ডারিংয়ের জন্য দায়ী অক্ষরটি পরিবর্তন করবে। রি-রেন্ডারিংয়ের এই হ্রাস UI প্রতিক্রিয়াশীল রাখার একটি অপরিহার্য অংশ।
ব্যবহারকারীর কাছে CrosswordWidget এবং Size প্রদানকারী প্রকাশ করতে, crossword_generator_app.dart ফাইলটি নিম্নরূপ পরিবর্তন করুন:
lib/উইজেটস/ক্রসওয়ার্ড_জেনারেটর_অ্যাপ.ডার্ট
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers.dart';
import 'crossword_widget.dart'; // Add this import
class CrosswordGeneratorApp extends StatelessWidget {
const CrosswordGeneratorApp({super.key});
@override
Widget build(BuildContext context) {
return _EagerInitialization(
child: Scaffold(
appBar: AppBar(
actions: [_CrosswordGeneratorMenu()], // Add this line
titleTextStyle: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
title: Text('Crossword Generator'),
),
body: SafeArea(child: CrosswordWidget()), // Replace what was here before
),
);
}
}
class _EagerInitialization extends ConsumerWidget {
const _EagerInitialization({required this.child});
final Widget child;
@override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(wordListProvider);
return child;
}
}
class _CrosswordGeneratorMenu extends ConsumerWidget { // Add from here
@override
Widget build(BuildContext context, WidgetRef ref) => MenuAnchor(
menuChildren: [
for (final entry in CrosswordSize.values)
MenuItemButton(
onPressed: () => ref.read(sizeProvider.notifier).setSize(entry),
leadingIcon: entry == ref.watch(sizeProvider)
? Icon(Icons.radio_button_checked_outlined)
: Icon(Icons.radio_button_unchecked_outlined),
child: Text(entry.label),
),
],
builder: (context, controller, child) => IconButton(
onPressed: () => controller.open(),
icon: Icon(Icons.settings),
),
); // To here.
}
এখানে কিছু পরিবর্তন হয়েছে। প্রথমত, wordList ListView হিসেবে রেন্ডার করার জন্য দায়ী কোডটি lib/widgets/crossword_widget.dart ফাইলে সংজ্ঞায়িত CrosswordWidget এ একটি কল দিয়ে প্রতিস্থাপিত হয়েছে। অন্য প্রধান পরিবর্তনটি হল অ্যাপের আচরণ পরিবর্তন করার জন্য একটি মেনু শুরু করা, যা ক্রসওয়ার্ডের আকার পরিবর্তনের মাধ্যমে শুরু হবে। ভবিষ্যতের ধাপগুলিতে আরও MenuItemButton যোগ করা হবে। আপনার অ্যাপটি চালান, আপনি এরকম কিছু দেখতে পাবেন:
একটি গ্রিডে অক্ষর এবং একটি মেনু প্রদর্শিত হয় যা ব্যবহারকারীকে গ্রিডের আকার পরিবর্তন করতে সক্ষম করে। কিন্তু শব্দগুলি ক্রসওয়ার্ড ধাঁধার মতো সাজানো হয় না। ক্রসওয়ার্ডে শব্দ কীভাবে যুক্ত করা হয় তার উপর কোনও বিধিনিষেধ প্রয়োগ না করার ফলে এটি ঘটে। সংক্ষেপে, এটি একটি গোলমাল। পরবর্তী ধাপে আপনি এমন কিছু নিয়ন্ত্রণে আনতে শুরু করবেন!
৫. সীমাবদ্ধতা প্রয়োগ করুন
আমরা কী পরিবর্তন করছি এবং কেন
বর্তমানে আপনার ক্রসওয়ার্ডে কোনও বৈধতা ছাড়াই শব্দগুলিকে ওভারল্যাপ করার সুবিধা রয়েছে। আপনি একটি বাস্তব ক্রসওয়ার্ড ধাঁধার মতো শব্দগুলিকে সঠিকভাবে ইন্টারলক করার জন্য সীমাবদ্ধতা পরীক্ষা যোগ করবেন।
এই ধাপের লক্ষ্য হল মডেলে কোড যোগ করে ক্রসওয়ার্ড সীমাবদ্ধতা প্রয়োগ করা। বিভিন্ন ধরণের ক্রসওয়ার্ড পাজল রয়েছে এবং এই কোডল্যাব যে স্টাইলটি প্রয়োগ করবে তা ইংরেজি ক্রসওয়ার্ড পাজলের ঐতিহ্য অনুসরণ করে। এই কোডটি পরিবর্তন করে অন্যান্য স্টাইলের ক্রসওয়ার্ড পাজল তৈরি করা, বরাবরের মতোই, পাঠকের উপর একটি অনুশীলন হিসেবে ছেড়ে দেওয়া হয়েছে।
শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
model.dartফাইলটি খুলুন এবং শুধুমাত্রCrosswordমডেলটি নিম্নলিখিতটি দিয়ে প্রতিস্থাপন করুন:
lib/model.dart
/// A crossword puzzle. This is a grid of characters with words placed in it.
/// The puzzle constraint is in the English crossword puzzle tradition.
abstract class Crossword implements Built<Crossword, CrosswordBuilder> {
/// Serializes and deserializes the [Crossword] class.
static Serializer<Crossword> get serializer => _$crosswordSerializer;
/// Width across the [Crossword] puzzle.
int get width;
/// Height down the [Crossword] puzzle.
int get height;
/// The words in the crossword.
BuiltList<CrosswordWord> get words;
/// The characters by location. Useful for displaying the crossword,
/// or checking the proposed solution.
BuiltMap<Location, CrosswordCharacter> get characters;
/// Checks if this crossword is valid.
bool get valid {
// Check that there are no duplicate words.
final wordSet = words.map((word) => word.word).toBuiltSet();
if (wordSet.length != words.length) {
return false;
}
for (final MapEntry(key: location, value: character)
in characters.entries) {
// All characters must be a part of an across or down word.
if (character.acrossWord == null && character.downWord == null) {
return false;
}
// All characters must be within the crossword puzzle.
// No drawing outside the lines.
if (location.x < 0 ||
location.y < 0 ||
location.x >= width ||
location.y >= height) {
return false;
}
// Characters above and below this character must be related
// by a vertical word
if (characters[location.up] case final up?) {
if (character.downWord == null) {
return false;
}
if (up.downWord != character.downWord) {
return false;
}
}
if (characters[location.down] case final down?) {
if (character.downWord == null) {
return false;
}
if (down.downWord != character.downWord) {
return false;
}
}
// Characters to the left and right of this character must be
// related by a horizontal word
final left = characters[location.left];
if (left != null) {
if (character.acrossWord == null) {
return false;
}
if (left.acrossWord != character.acrossWord) {
return false;
}
}
final right = characters[location.right];
if (right != null) {
if (character.acrossWord == null) {
return false;
}
if (right.acrossWord != character.acrossWord) {
return false;
}
}
}
return true;
}
/// Add a word to the crossword at the given location and direction.
Crossword? addWord({
required Location location,
required String word,
required Direction direction,
}) {
// Require that the word is not already in the crossword.
if (words.map((crosswordWord) => crosswordWord.word).contains(word)) {
return null;
}
final wordCharacters = word.characters;
bool overlap = false;
// Check that the word fits in the crossword.
for (final (index, character) in wordCharacters.indexed) {
final characterLocation = switch (direction) {
Direction.across => location.rightOffset(index),
Direction.down => location.downOffset(index),
};
final target = characters[characterLocation];
if (target != null) {
overlap = true;
if (target.character != character) {
return null;
}
if (direction == Direction.across && target.acrossWord != null ||
direction == Direction.down && target.downWord != null) {
return null;
}
}
}
if (words.isNotEmpty && !overlap) {
return null;
}
final candidate = rebuild(
(b) => b
..words.add(
CrosswordWord.word(
word: word,
direction: direction,
location: location,
),
),
);
if (candidate.valid) {
return candidate;
} else {
return null;
}
}
/// As a finalize step, fill in the characters map.
@BuiltValueHook(finalizeBuilder: true)
static void _fillCharacters(CrosswordBuilder b) {
b.characters.clear();
for (final word in b.words.build()) {
for (final (idx, character) in word.word.characters.indexed) {
switch (word.direction) {
case Direction.across:
b.characters.updateValue(
word.location.rightOffset(idx),
(b) => b.rebuild((bInner) => bInner.acrossWord.replace(word)),
ifAbsent: () => CrosswordCharacter.character(
acrossWord: word,
character: character,
),
);
case Direction.down:
b.characters.updateValue(
word.location.downOffset(idx),
(b) => b.rebuild((bInner) => bInner.downWord.replace(word)),
ifAbsent: () => CrosswordCharacter.character(
downWord: word,
character: character,
),
);
}
}
}
}
/// Pretty print a crossword. Generates the character grid, and lists
/// the down words and across words sorted by location.
String prettyPrintCrossword() {
final buffer = StringBuffer();
final grid = List.generate(
height,
(_) => List.generate(
width,
(_) => '░', // https://www.compart.com/en/unicode/U+2591
),
);
for (final MapEntry(key: Location(:x, :y), value: character)
in characters.entries) {
grid[y][x] = character.character;
}
for (final row in grid) {
buffer.writeln(row.join());
}
buffer.writeln();
buffer.writeln('Across:');
for (final word
in words.where((word) => word.direction == Direction.across).toList()
..sort(CrosswordWord.locationComparator)) {
buffer.writeln('${word.location.prettyPrint()}: ${word.word}');
}
buffer.writeln();
buffer.writeln('Down:');
for (final word
in words.where((word) => word.direction == Direction.down).toList()
..sort(CrosswordWord.locationComparator)) {
buffer.writeln('${word.location.prettyPrint()}: ${word.word}');
}
return buffer.toString();
}
/// Constructor for [Crossword].
factory Crossword.crossword({
required int width,
required int height,
Iterable<CrosswordWord>? words,
}) {
return Crossword((b) {
b
..width = width
..height = height;
if (words != null) {
b.words.addAll(words);
}
});
}
/// Constructor for [Crossword].
/// Use [Crossword.crossword] instead.
factory Crossword([void Function(CrosswordBuilder)? updates]) = _$Crossword;
Crossword._();
}
একটি দ্রুত মনে করিয়ে দেওয়ার জন্য, model.dart এবং providers.dart ফাইলগুলিতে আপনি যে পরিবর্তনগুলি করছেন তার জন্য সংশ্লিষ্ট model.g.dart এবং providers.g.dart ফাইলগুলি আপডেট করার জন্য build_runner চালানো প্রয়োজন। যদি এই ফাইলগুলি স্বয়ংক্রিয়ভাবে আপডেট না হয়ে থাকে, dart run build_runner watch -d দিয়ে আবার build_runner শুরু করার এখনই উপযুক্ত সময়।
মডেল লেয়ারে এই নতুন ক্ষমতার সুবিধা নিতে, আপনাকে প্রোভাইডার লেয়ারটি ম্যাচ করার জন্য আপডেট করতে হবে।
- আপনার
providers.dartফাইলটি নিম্নরূপ সম্পাদনা করুন:
lib/providers.dart সম্পর্কে
import 'dart:convert';
import 'dart:math';
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'model.dart' as model;
import 'utils.dart';
part 'providers.g.dart';
/// A provider for the wordlist to use when generating the crossword.
@riverpod
Future<BuiltSet<String>> wordList(WordListRef ref) async {
// This codebase requires that all words consist of lowercase characters
// in the range 'a'-'z'. Words containing uppercase letters will be
// lowercased, and words containing runes outside this range will
// be removed.
final re = RegExp(r'^[a-z]+$');
final words = await rootBundle.loadString('assets/words.txt');
return const LineSplitter().convert(words).toBuiltSet().rebuild((b) => b
..map((word) => word.toLowerCase().trim())
..where((word) => word.length > 2)
..where((word) => re.hasMatch(word)));
}
/// An enumeration for different sizes of [model.Crossword]s.
enum CrosswordSize {
small(width: 20, height: 11),
medium(width: 40, height: 22),
large(width: 80, height: 44),
xlarge(width: 160, height: 88),
xxlarge(width: 500, height: 500);
const CrosswordSize({
required this.width,
required this.height,
});
final int width;
final int height;
String get label => '$width x $height';
}
/// A provider that holds the current size of the crossword to generate.
@Riverpod(keepAlive: true)
class Size extends _$Size {
var _size = CrosswordSize.medium;
@override
CrosswordSize build() => _size;
void setSize(CrosswordSize size) {
_size = size;
ref.invalidateSelf();
}
}
final _random = Random();
@riverpod
Stream<model.Crossword> crossword(CrosswordRef ref) async* {
final size = ref.watch(sizeProvider);
final wordListAsync = ref.watch(wordListProvider);
var crossword =
model.Crossword.crossword(width: size.width, height: size.height);
yield* wordListAsync.when(
data: (wordList) async* {
while (crossword.characters.length < size.width * size.height * 0.8) {
final word = wordList.randomElement();
final direction =
_random.nextBool() ? model.Direction.across : model.Direction.down;
final location = model.Location.at(
_random.nextInt(size.width), _random.nextInt(size.height));
var candidate = crossword.addWord( // Edit from here
word: word, direction: direction, location: location);
await Future.delayed(Duration(milliseconds: 10));
if (candidate != null) {
debugPrint('Added word: $word');
crossword = candidate;
yield crossword;
} else {
debugPrint('Failed to add word: $word');
} // To here.
}
yield crossword;
},
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield crossword;
},
loading: () async* {
yield crossword;
},
);
}
- তোমার অ্যাপটি চালাও। UI তে খুব বেশি কিছু ঘটছে না, কিন্তু লগগুলি দেখলে অনেক কিছু ঘটছে।
এখানে কী ঘটছে তা যদি আপনি চিন্তা করেন, তাহলে আমরা দেখছি যে হঠাৎ করেই একটি ক্রসওয়ার্ড দেখা যাচ্ছে। Crossword মডেলের addWord পদ্ধতিতে বর্তমান ক্রসওয়ার্ডে উপযুক্ত নয় এমন যেকোনো প্রস্তাবিত শব্দ প্রত্যাখ্যান করা হচ্ছে, তাই এটি আশ্চর্যজনক যে আমরা এমন কিছু দেখতে পাচ্ছি যা আদৌ দেখা যাচ্ছে।
কেন ব্যাকগ্রাউন্ড প্রসেসিংয়ে যাবেন?
ক্রসওয়ার্ড জেনারেশনের সময় আপনি হয়তো লক্ষ্য করবেন যে UI রেসপন্সিভ হয়ে যাচ্ছে। এটি ঘটে কারণ ক্রসওয়ার্ড জেনারেশনে হাজার হাজার ভ্যালিডেশন চেক জড়িত থাকে। এই গণনাগুলি Flutter এর 60fps রেন্ডারিং লুপকে ব্লক করে, তাই আপনি ভারী গণনাকে ব্যাকগ্রাউন্ড আইসোলেটে স্থানান্তর করতে পারবেন। এর সুবিধা হল ব্যাকগ্রাউন্ডে ধাঁধা তৈরি করার সময় UI মসৃণ থাকে।
কোন শব্দগুলো কোথায় ব্যবহার করতে হবে তা বেছে নেওয়ার ক্ষেত্রে আরও পদ্ধতিগত হওয়ার প্রস্তুতি হিসেবে, এই গণনাটি UI থ্রেড থেকে সরিয়ে একটি ব্যাকগ্রাউন্ড আইসোলেটে স্থানান্তর করা খুবই সহায়ক হবে। ফ্লটারের একটি খুব দরকারী র্যাপার রয়েছে যা কিছু কাজ করে ব্যাকগ্রাউন্ড আইসোলেটে এটি চালানোর জন্য - compute ফাংশন।
-
providers.dartফাইলে, ক্রসওয়ার্ড প্রোভাইডারটি নিম্নরূপ পরিবর্তন করুন:
lib/providers.dart সম্পর্কে
@riverpod
Stream<model.Crossword> crossword(Ref ref) async* {
final size = ref.watch(sizeProvider);
final wordListAsync = ref.watch(wordListProvider);
var crossword = model.Crossword.crossword(
width: size.width,
height: size.height,
);
yield* wordListAsync.when(
data: (wordList) async* {
while (crossword.characters.length < size.width * size.height * 0.8) {
final word = wordList.randomElement();
final direction = _random.nextBool()
? model.Direction.across
: model.Direction.down;
final location = model.Location.at(
_random.nextInt(size.width),
_random.nextInt(size.height),
);
try { // Edit from here
var candidate = await compute((
(String, model.Direction, model.Location) wordToAdd,
) {
final (word, direction, location) = wordToAdd;
return crossword.addWord(
word: word,
direction: direction,
location: location,
);
}, (word, direction, location));
if (candidate != null) {
crossword = candidate;
yield crossword;
}
} catch (e) {
debugPrint('Error running isolate: $e');
} // To here.
}
yield crossword;
},
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield crossword;
},
loading: () async* {
yield crossword;
},
);
}
আইসোলেট বিধিনিষেধ বোঝা
এই কোডটি কাজ করে কিন্তু একটি লুকানো সমস্যা আছে। আইসোলেটগুলির মধ্যে কোন ডেটা প্রেরণ করা যেতে পারে সে সম্পর্কে কঠোর নিয়ম রয়েছে, সমস্যাটি হল ক্লোজারটি প্রোভাইডার রেফারেন্সকে "ক্যাপচার" করে, যা সিরিয়ালাইজ করে অন্য আইসোলেটে পাঠানো যায় না।
সিস্টেম যখন সিরিয়ালাইজেবল নয় এমন ডেটা পাঠানোর চেষ্টা করবে তখন আপনি এটি দেখতে পাবেন:
flutter: Error running isolate: Invalid argument(s): Illegal argument in isolate message: object is unsendable - Library:'dart:async' Class: _Future@4048458 (see restrictions listed at `SendPort.send()` documentation for more information)
flutter: <- Instance of 'AutoDisposeStreamProviderElement<Crossword>' (from package:riverpod/src/stream_provider.dart)
flutter: <- Context num_variables: 2 <- Context num_variables: 1 parent:{ Context num_variables: 2 }
flutter: <- Context num_variables: 1 parent:{ Context num_variables: 1 parent:{ Context num_variables: 2 } }
flutter: <- Closure: () => Crossword? (from package:generate_crossword/providers.dart)
এটি compute একটি প্রোভাইডারে ব্যাকগ্রাউন্ড আইসোলেট ক্লোজিং-এর কাছে যে ক্লোজারটি হস্তান্তর করছে তার ফলাফল, যা SendPort.send() এর মাধ্যমে পাঠানো যাবে না। এর একটি সমাধান হল নিশ্চিত করা যে ক্লোজারটি বন্ধ করার জন্য এমন কিছু নেই যা পাঠানো যায় না।
প্রথম ধাপ হল আইসোলেট কোড থেকে প্রোভাইডারদের আলাদা করা।
- আপনার
libডিরেক্টরিতে একটিisolates.dartফাইল তৈরি করুন এবং তারপরে এতে নিম্নলিখিত সামগ্রী যুক্ত করুন:
lib/isolates.dart সম্পর্কে
import 'dart:math';
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart';
import 'model.dart';
import 'utils.dart';
final _random = Random();
Stream<Crossword> exploreCrosswordSolutions({
required Crossword crossword,
required BuiltSet<String> wordList,
}) async* {
while (crossword.characters.length <
crossword.width * crossword.height * 0.8) {
final word = wordList.randomElement();
final direction = _random.nextBool() ? Direction.across : Direction.down;
final location = Location.at(
_random.nextInt(crossword.width),
_random.nextInt(crossword.height),
);
try {
var candidate = await compute(((String, Direction, Location) wordToAdd) {
final (word, direction, location) = wordToAdd;
return crossword.addWord(
word: word,
direction: direction,
location: location,
);
}, (word, direction, location));
if (candidate != null) {
crossword = candidate;
yield crossword;
}
} catch (e) {
debugPrint('Error running isolate: $e');
}
}
}
এই কোডটি বেশ পরিচিত মনে হবে। এটি crossword প্রোভাইডারে যা ছিল তার মূল অংশ, কিন্তু এখন এটি একটি স্বতন্ত্র জেনারেটর ফাংশন হিসেবে কাজ করছে। এখন আপনি আপনার providers.dart ফাইলটি আপডেট করে এই নতুন ফাংশনটি ব্যবহার করে ব্যাকগ্রাউন্ড আইসোলেট চালু করতে পারেন।
lib/providers.dart সম্পর্কে
// Drop the dart:math import, the _random instance moved to isolates.dart
import 'dart:convert';
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'isolates.dart'; // Add this import
import 'model.dart' as model;
// Drop the utils.dart import
part 'providers.g.dart';
/// A provider for the wordlist to use when generating the crossword.
@riverpod
Future<BuiltSet<String>> wordList(Ref ref) async {
// This codebase requires that all words consist of lowercase characters
// in the range 'a'-'z'. Words containing uppercase letters will be
// lowercased, and words containing runes outside this range will
// be removed.
final re = RegExp(r'^[a-z]+$');
final words = await rootBundle.loadString('assets/words.txt');
return const LineSplitter()
.convert(words)
.toBuiltSet()
.rebuild(
(b) => b
..map((word) => word.toLowerCase().trim())
..where((word) => word.length > 2)
..where((word) => re.hasMatch(word)),
);
}
/// An enumeration for different sizes of [model.Crossword]s.
enum CrosswordSize {
small(width: 20, height: 11),
medium(width: 40, height: 22),
large(width: 80, height: 44),
xlarge(width: 160, height: 88),
xxlarge(width: 500, height: 500);
const CrosswordSize({required this.width, required this.height});
final int width;
final int height;
String get label => '$width x $height';
}
/// A provider that holds the current size of the crossword to generate.
@Riverpod(keepAlive: true)
class Size extends _$Size {
var _size = CrosswordSize.medium;
@override
CrosswordSize build() => _size;
void setSize(CrosswordSize size) {
_size = size;
ref.invalidateSelf();
}
}
// Drop the _random instance
@riverpod
Stream<model.Crossword> crossword(Ref ref) async* {
final size = ref.watch(sizeProvider);
final wordListAsync = ref.watch(wordListProvider);
final emptyCrossword = model.Crossword.crossword( // Edit from here
width: size.width,
height: size.height,
);
yield* wordListAsync.when(
data: (wordList) => exploreCrosswordSolutions(
crossword: emptyCrossword,
wordList: wordList,
),
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield emptyCrossword;
},
loading: () async* {
yield emptyCrossword; // To here.
},
);
}
এর সাহায্যে এখন আপনার কাছে এমন একটি টুল আছে যা বিভিন্ন আকারের ক্রসওয়ার্ড পাজল তৈরি করছে, যার সাহায্যে ব্যাকগ্রাউন্ড আইসোলেটে ঘটছে এমন compute বের করা সম্ভব হবে। এখন, ক্রসওয়ার্ড পাজলে কোন শব্দ যোগ করার চেষ্টা করবেন তা নির্ধারণ করার সময় কোডটি আরও দক্ষ হলে ভালো হত।
৬. কাজের সারি পরিচালনা করুন
অনুসন্ধান কৌশল বোঝা
তোমার ক্রসওয়ার্ড জেনারেশন ব্যাকট্র্যাকিং ব্যবহার করে, যা একটি পদ্ধতিগত ট্রায়াল-এন্ড-এরর পদ্ধতি। প্রথমে তোমার অ্যাপটি একটি স্থানে একটি শব্দ স্থাপন করার চেষ্টা করে, তারপর পরীক্ষা করে যে এটি বিদ্যমান শব্দের সাথে খাপ খায় কিনা। যদি তা হয়, তাহলে এটি রেখে পরবর্তী শব্দটি চেষ্টা করে দেখুন। যদি না হয়, তাহলে এটি সরিয়ে অন্য কোথাও চেষ্টা করুন।
ক্রসওয়ার্ডের জন্য ব্যাকট্র্যাকিং কাজ করে কারণ প্রতিটি শব্দ স্থাপন ভবিষ্যতের শব্দের জন্য সীমাবদ্ধতা তৈরি করে, যেখানে অবৈধ স্থান নির্ধারণ দ্রুত সনাক্ত করা হয় এবং পরিত্যক্ত করা হয়। অপরিবর্তনীয় ডেটা স্ট্রাকচার "পূর্বাবস্থায় ফেরানো" পরিবর্তনগুলিকে কার্যকর করে তোলে।
কোডটির বর্তমান সমস্যাটির একটি অংশ হল যে সমাধান করা সমস্যাটি কার্যকরভাবে একটি অনুসন্ধান সমস্যা, এবং বর্তমান সমাধানটি হল অন্ধভাবে অনুসন্ধান করা। যদি কোডটি গ্রিডের যেকোনো জায়গায় এলোমেলোভাবে শব্দ স্থাপন করার চেষ্টা করার পরিবর্তে বর্তমান শব্দের সাথে সংযুক্ত শব্দগুলি খুঁজে বের করার উপর মনোনিবেশ করে, তাহলে সিস্টেমটি দ্রুত সমাধান খুঁজে পাবে। এটি সমাধানের একটি উপায় হল শব্দ খুঁজে বের করার চেষ্টা করার জন্য অবস্থানগুলির একটি কাজের সারি প্রবর্তন করা।
কোডটি প্রার্থী সমাধান তৈরি করে, প্রার্থী সমাধান বৈধ কিনা তা পরীক্ষা করে এবং বৈধতার উপর নির্ভর করে প্রার্থীকে অন্তর্ভুক্ত করে অথবা ফেলে দেয়। এটি অ্যালগরিদমের ব্যাকট্র্যাকিং পরিবারের একটি উদাহরণ বাস্তবায়ন। built_value এবং built_collection দ্বারা এই বাস্তবায়নটি অনেক সহজ করা হয়েছে, যা নতুন অপরিবর্তনীয় মান তৈরি করতে সক্ষম করে যা প্রাপ্ত হয় এবং এইভাবে, অপরিবর্তনীয় মানের সাথে সাধারণ অবস্থা ভাগ করে নেয়। এটি ডিপ কপি করার জন্য প্রয়োজনীয় মেমরি খরচ ছাড়াই সম্ভাব্য প্রার্থীদের সস্তায় শোষণ করতে সক্ষম করে।
শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
model.dartফাইলটি খুলুন এবং এতে নিম্নলিখিতWorkQueueসংজ্ঞাটি যোগ করুন:
lib/model.dart
/// Constructor for [Crossword].
/// Use [Crossword.crossword] instead.
factory Crossword([void Function(CrosswordBuilder)? updates]) = _$Crossword;
Crossword._();
}
// Add from here
/// A work queue for a worker to process. The work queue contains a crossword
/// and a list of locations to try, along with candidate words to add to the
/// crossword.
abstract class WorkQueue implements Built<WorkQueue, WorkQueueBuilder> {
static Serializer<WorkQueue> get serializer => _$workQueueSerializer;
/// The crossword the worker is working on.
Crossword get crossword;
/// The outstanding queue of locations to try.
BuiltMap<Location, Direction> get locationsToTry;
/// Known bad locations.
BuiltSet<Location> get badLocations;
/// The list of unused candidate words that can be added to this crossword.
BuiltSet<String> get candidateWords;
/// Returns true if the work queue is complete.
bool get isCompleted => locationsToTry.isEmpty || candidateWords.isEmpty;
/// Create a work queue from a crossword.
static WorkQueue from({
required Crossword crossword,
required Iterable<String> candidateWords,
required Location startLocation,
}) => WorkQueue((b) {
if (crossword.words.isEmpty) {
// Strip candidate words too long to fit in the crossword
b.candidateWords.addAll(
candidateWords.where(
(word) => word.characters.length <= crossword.width,
),
);
b.crossword.replace(crossword);
b.locationsToTry.addAll({startLocation: Direction.across});
} else {
// Assuming words have already been stripped to length
b.candidateWords.addAll(
candidateWords.toBuiltSet().rebuild(
(b) => b.removeAll(crossword.words.map((word) => word.word)),
),
);
b.crossword.replace(crossword);
crossword.characters
.rebuild(
(b) => b.removeWhere((location, character) {
if (character.acrossWord != null && character.downWord != null) {
return true;
}
final left = crossword.characters[location.left];
if (left != null && left.downWord != null) return true;
final right = crossword.characters[location.right];
if (right != null && right.downWord != null) return true;
final up = crossword.characters[location.up];
if (up != null && up.acrossWord != null) return true;
final down = crossword.characters[location.down];
if (down != null && down.acrossWord != null) return true;
return false;
}),
)
.forEach((location, character) {
b.locationsToTry.addAll({
location: switch ((character.acrossWord, character.downWord)) {
(null, null) => throw StateError(
'Character is not part of a word',
),
(null, _) => Direction.across,
(_, null) => Direction.down,
(_, _) => throw StateError('Character is part of two words'),
},
});
});
}
});
WorkQueue remove(Location location) => rebuild(
(b) => b
..locationsToTry.remove(location)
..badLocations.add(location),
);
/// Update the work queue from a crossword derived from the current crossword
/// that this work queue is built from.
WorkQueue updateFrom(final Crossword crossword) =>
WorkQueue.from(
crossword: crossword,
candidateWords: candidateWords,
startLocation: locationsToTry.isNotEmpty
? locationsToTry.keys.first
: Location.at(0, 0),
).rebuild(
(b) => b
..badLocations.addAll(badLocations)
..locationsToTry.removeWhere(
(location, _) => badLocations.contains(location),
),
);
/// Factory constructor for [WorkQueue]
factory WorkQueue([void Function(WorkQueueBuilder)? updates]) = _$WorkQueue;
WorkQueue._();
} // To here.
/// Construct the serialization/deserialization code for the data model.
@SerializersFor([
Location,
Crossword,
CrosswordWord,
CrosswordCharacter,
WorkQueue, // Add this line
])
final Serializers serializers = _$serializers;
- এই নতুন কন্টেন্টটি যোগ করার পরেও যদি কয়েক সেকেন্ডের বেশি সময় ধরে এই ফাইলে লাল স্কুইগল থাকে, তাহলে নিশ্চিত করুন যে আপনার
build_runnerএখনও চলছে। যদি না থাকে,dart run build_runner watch -dকমান্ডটি চালান।
এই কোডে আপনি লগিং ব্যবহার করে বিভিন্ন আকারের ক্রসওয়ার্ড তৈরি করতে কত সময় লাগে তা দেখাতে চলেছেন। Durations-এ যদি সুন্দরভাবে ফর্ম্যাট করা ডিসপ্লে থাকত তাহলে ভালো হতো। সৌভাগ্যক্রমে, এক্সটেনশন পদ্ধতির সাহায্যে আমরা আমাদের প্রয়োজনীয় সঠিক পদ্ধতিটি যোগ করতে পারি।
-
utils.dartফাইলটি নিম্নরূপ সম্পাদনা করুন:
lib/utils.dart সম্পর্কে
import 'dart:math';
import 'package:built_collection/built_collection.dart';
/// A [Random] instance for generating random numbers.
final _random = Random();
/// An extension on [BuiltSet] that adds a method to get a random element.
extension RandomElements<E> on BuiltSet<E> {
E randomElement() {
return elementAt(_random.nextInt(length));
}
}
// Add from here
/// An extension on [Duration] that adds a method to format the duration.
extension DurationFormat on Duration {
/// A human-readable string representation of the duration.
/// This format is tuned for durations in the seconds to days range.
String get formatted {
final hours = inHours.remainder(24).toString().padLeft(2, '0');
final minutes = inMinutes.remainder(60).toString().padLeft(2, '0');
final seconds = inSeconds.remainder(60).toString().padLeft(2, '0');
return switch ((inDays, inHours, inMinutes, inSeconds)) {
(0, 0, 0, _) => '${inSeconds}s',
(0, 0, _, _) => '$inMinutes:$seconds',
(0, _, _, _) => '$inHours:$minutes:$seconds',
_ => '$inDays days, $hours:$minutes:$seconds',
};
}
} // To here.
এই এক্সটেনশন পদ্ধতিটি সেকেন্ড থেকে দিন পর্যন্ত বিভিন্ন সময়কাল প্রদর্শনের জন্য উপযুক্ত উপায় নির্বাচন করার জন্য রেকর্ডের উপর সুইচ এক্সপ্রেশন এবং প্যাটার্ন ম্যাচিংয়ের সুবিধা গ্রহণ করে। কোডের এই স্টাইল সম্পর্কে আরও তথ্যের জন্য, ডার্টের প্যাটার্ন এবং রেকর্ডস কোডল্যাবে ডাইভ ইনটু দেখুন।
- এই নতুন কার্যকারিতাটি সংহত করার জন্য,
exploreCrosswordSolutionsফাংশনটি কীভাবে সংজ্ঞায়িত করা হয়েছে তা পুনরায় সংজ্ঞায়িত করতেisolates.dartফাইলটি প্রতিস্থাপন করুন:
lib/isolates.dart সম্পর্কে
import 'package:built_collection/built_collection.dart';
import 'package:characters/characters.dart';
import 'package:flutter/foundation.dart';
import 'model.dart';
import 'utils.dart';
Stream<Crossword> exploreCrosswordSolutions({
required Crossword crossword,
required BuiltSet<String> wordList,
}) async* {
final start = DateTime.now();
var workQueue = WorkQueue.from(
crossword: crossword,
candidateWords: wordList,
startLocation: Location.at(0, 0),
);
while (!workQueue.isCompleted) {
final location = workQueue.locationsToTry.keys.toBuiltSet().randomElement();
try {
final crossword = await compute(((WorkQueue, Location) workMessage) {
final (workQueue, location) = workMessage;
final direction = workQueue.locationsToTry[location]!;
final target = workQueue.crossword.characters[location];
if (target == null) {
return workQueue.crossword.addWord(
direction: direction,
location: location,
word: workQueue.candidateWords.randomElement(),
);
}
var words = workQueue.candidateWords.toBuiltList().rebuild(
(b) => b
..where((b) => b.characters.contains(target.character))
..shuffle(),
);
int tryCount = 0;
for (final word in words) {
tryCount++;
for (final (index, character) in word.characters.indexed) {
if (character != target.character) continue;
final candidate = workQueue.crossword.addWord(
location: switch (direction) {
Direction.across => location.leftOffset(index),
Direction.down => location.upOffset(index),
},
word: word,
direction: direction,
);
if (candidate != null) {
return candidate;
}
}
if (tryCount > 1000) {
break;
}
}
}, (workQueue, location));
if (crossword != null) {
workQueue = workQueue.updateFrom(crossword);
yield crossword;
} else {
workQueue = workQueue.remove(location);
}
} catch (e) {
debugPrint('Error running isolate: $e');
}
}
debugPrint(
'${crossword.width} x ${crossword.height} Crossword generated in '
'${DateTime.now().difference(start).formatted}',
);
}
এই কোডটি চালানোর ফলে এমন একটি অ্যাপ তৈরি হবে যা দেখতে একই রকম দেখাবে, কিন্তু পার্থক্য হলো একটি সম্পূর্ণ ক্রসওয়ার্ড ধাঁধা খুঁজে পেতে কত সময় লাগে। এখানে 1 মিনিট 29 সেকেন্ডে তৈরি করা একটি 80 x 44 ক্রসওয়ার্ড ধাঁধা রয়েছে।
চেকপয়েন্ট: দক্ষ অ্যালগরিদম কাজ করছে
আপনার ক্রসওয়ার্ড তৈরি এখন উল্লেখযোগ্যভাবে দ্রুত হওয়া উচিত কারণ:
- ছেদ বিন্দু লক্ষ্য করে বুদ্ধিমান শব্দ স্থাপন
- প্লেসমেন্ট ব্যর্থ হলে দক্ষ ব্যাকট্র্যাকিং
- অপ্রয়োজনীয় অনুসন্ধান এড়াতে কাজের সারি ব্যবস্থাপনা
স্পষ্ট প্রশ্ন হলো, আমরা কি আরও দ্রুত যেতে পারি? হ্যাঁ, হ্যাঁ, আমরা পারব।
৭. পৃষ্ঠ পরিসংখ্যান
কেন পরিসংখ্যান যোগ করবেন?
দ্রুত কিছু করার সময়, এটি কী ঘটছে তা দেখতে সাহায্য করে। পরিসংখ্যান আপনাকে অগ্রগতি পর্যবেক্ষণ করতে সাহায্য করে, রিয়েল-টাইমে অ্যালগরিদম কীভাবে কাজ করছে তা দেখতে। এটি আপনাকে অ্যালগরিদম কোথায় সময় ব্যয় করে তা বোঝার মাধ্যমে বাধাগুলি সনাক্ত করতে সক্ষম করে। এটি আপনাকে অপ্টিমাইজেশন পদ্ধতি সম্পর্কে সচেতন সিদ্ধান্ত নেওয়ার মাধ্যমে কর্মক্ষমতা সামঞ্জস্য করতে সহায়তা করে।
আপনি যে তথ্য প্রদর্শন করবেন তা WorkQueue থেকে বের করে UI তে প্রদর্শন করতে হবে। একটি কার্যকর প্রথম পদক্ষেপ হল একটি নতুন মডেল ক্লাস সংজ্ঞায়িত করা যাতে আপনি যে তথ্য প্রদর্শন করতে চান তা অন্তর্ভুক্ত থাকে।
শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
DisplayInfoক্লাস যোগ করতেmodel.dartফাইলটি নিম্নরূপ সম্পাদনা করুন:
lib/model.dart
import 'package:built_collection/built_collection.dart';
import 'package:built_value/built_value.dart';
import 'package:built_value/serializer.dart';
import 'package:characters/characters.dart';
import 'package:intl/intl.dart'; // Add this import
part 'model.g.dart';
/// A location in a crossword.
abstract class Location implements Built<Location, LocationBuilder> {
- ফাইলের শেষে,
DisplayInfoক্লাস যোগ করার জন্য নিম্নলিখিত পরিবর্তনগুলি করুন:
lib/model.dart
/// Factory constructor for [WorkQueue]
factory WorkQueue([void Function(WorkQueueBuilder)? updates]) = _$WorkQueue;
WorkQueue._();
}
// Add from here.
/// Display information for the current state of the crossword solve.
abstract class DisplayInfo implements Built<DisplayInfo, DisplayInfoBuilder> {
static Serializer<DisplayInfo> get serializer => _$displayInfoSerializer;
/// The number of words in the grid.
String get wordsInGridCount;
/// The number of candidate words.
String get candidateWordsCount;
/// The number of locations to explore.
String get locationsToExploreCount;
/// The number of known bad locations.
String get knownBadLocationsCount;
/// The percentage of the grid filled.
String get gridFilledPercentage;
/// Construct a [DisplayInfo] instance from a [WorkQueue].
factory DisplayInfo.from({required WorkQueue workQueue}) {
final gridFilled =
(workQueue.crossword.characters.length /
(workQueue.crossword.width * workQueue.crossword.height));
final fmt = NumberFormat.decimalPattern();
return DisplayInfo(
(b) => b
..wordsInGridCount = fmt.format(workQueue.crossword.words.length)
..candidateWordsCount = fmt.format(workQueue.candidateWords.length)
..locationsToExploreCount = fmt.format(workQueue.locationsToTry.length)
..knownBadLocationsCount = fmt.format(workQueue.badLocations.length)
..gridFilledPercentage = '${(gridFilled * 100).toStringAsFixed(2)}%',
);
}
/// An empty [DisplayInfo] instance.
static DisplayInfo get empty => DisplayInfo(
(b) => b
..wordsInGridCount = '0'
..candidateWordsCount = '0'
..locationsToExploreCount = '0'
..knownBadLocationsCount = '0'
..gridFilledPercentage = '0%',
);
factory DisplayInfo([void Function(DisplayInfoBuilder)? updates]) =
_$DisplayInfo;
DisplayInfo._();
} // To here.
/// Construct the serialization/deserialization code for the data model.
@SerializersFor([
Location,
Crossword,
CrosswordWord,
CrosswordCharacter,
WorkQueue,
DisplayInfo, // Add this line.
])
final Serializers serializers = _$serializers;
-
WorkQueueমডেলটি প্রকাশ করার জন্যisolates.dartফাইলটি নিম্নরূপ পরিবর্তন করুন:
lib/isolates.dart সম্পর্কে
import 'package:built_collection/built_collection.dart';
import 'package:characters/characters.dart';
import 'package:flutter/foundation.dart';
import 'model.dart';
import 'utils.dart';
Stream<WorkQueue> exploreCrosswordSolutions({ // Modify this line
required Crossword crossword,
required BuiltSet<String> wordList,
}) async* {
final start = DateTime.now();
var workQueue = WorkQueue.from(
crossword: crossword,
candidateWords: wordList,
startLocation: Location.at(0, 0),
);
while (!workQueue.isCompleted) {
final location = workQueue.locationsToTry.keys.toBuiltSet().randomElement();
try {
final crossword = await compute(((WorkQueue, Location) workMessage) {
final (workQueue, location) = workMessage;
final direction = workQueue.locationsToTry[location]!;
final target = workQueue.crossword.characters[location];
if (target == null) {
return workQueue.crossword.addWord(
direction: direction,
location: location,
word: workQueue.candidateWords.randomElement(),
);
}
var words = workQueue.candidateWords.toBuiltList().rebuild(
(b) => b
..where((b) => b.characters.contains(target.character))
..shuffle(),
);
int tryCount = 0;
for (final word in words) {
tryCount++;
for (final (index, character) in word.characters.indexed) {
if (character != target.character) continue;
final candidate = workQueue.crossword.addWord(
location: switch (direction) {
Direction.across => location.leftOffset(index),
Direction.down => location.upOffset(index),
},
word: word,
direction: direction,
);
if (candidate != null) {
return candidate;
}
}
if (tryCount > 1000) {
break;
}
}
}, (workQueue, location));
if (crossword != null) {
workQueue = workQueue.updateFrom(crossword); // Drop the yield crossword;
} else {
workQueue = workQueue.remove(location);
}
yield workQueue; // Add this line.
} catch (e) {
debugPrint('Error running isolate: $e');
}
}
debugPrint(
'${crossword.width} x ${crossword.height} Crossword generated in '
'${DateTime.now().difference(start).formatted}',
);
}
এখন যেহেতু ব্যাকগ্রাউন্ড আইসোলেট কাজের কিউ প্রকাশ করছে, এখন প্রশ্ন হল এই তথ্য উৎস থেকে পরিসংখ্যান কীভাবে এবং কোথা থেকে বের করা যায়।
- পুরাতন ক্রসওয়ার্ড প্রোভাইডারটিকে একটি ওয়ার্ক কিউ প্রোভাইডার দিয়ে প্রতিস্থাপন করুন এবং তারপরে আরও প্রোভাইডার যুক্ত করুন যা ওয়ার্ক কিউ প্রোভাইডারের স্ট্রিম থেকে তথ্য সংগ্রহ করে:
lib/providers.dart সম্পর্কে
import 'dart:convert';
import 'dart:math'; // Add this import
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'isolates.dart';
import 'model.dart' as model;
part 'providers.g.dart';
/// A provider for the wordlist to use when generating the crossword.
@riverpod
Future<BuiltSet<String>> wordList(Ref ref) async {
// This codebase requires that all words consist of lowercase characters
// in the range 'a'-'z'. Words containing uppercase letters will be
// lowercased, and words containing runes outside this range will
// be removed.
final re = RegExp(r'^[a-z]+$');
final words = await rootBundle.loadString('assets/words.txt');
return const LineSplitter()
.convert(words)
.toBuiltSet()
.rebuild(
(b) => b
..map((word) => word.toLowerCase().trim())
..where((word) => word.length > 2)
..where((word) => re.hasMatch(word)),
);
}
/// An enumeration for different sizes of [model.Crossword]s.
enum CrosswordSize {
small(width: 20, height: 11),
medium(width: 40, height: 22),
large(width: 80, height: 44),
xlarge(width: 160, height: 88),
xxlarge(width: 500, height: 500);
const CrosswordSize({required this.width, required this.height});
final int width;
final int height;
String get label => '$width x $height';
}
/// A provider that holds the current size of the crossword to generate.
@Riverpod(keepAlive: true)
class Size extends _$Size {
var _size = CrosswordSize.medium;
@override
CrosswordSize build() => _size;
void setSize(CrosswordSize size) {
_size = size;
ref.invalidateSelf();
}
}
@riverpod
Stream<model.WorkQueue> workQueue(Ref ref) async* { // Modify this provider
final size = ref.watch(sizeProvider);
final wordListAsync = ref.watch(wordListProvider);
final emptyCrossword = model.Crossword.crossword(
width: size.width,
height: size.height,
);
final emptyWorkQueue = model.WorkQueue.from(
crossword: emptyCrossword,
candidateWords: BuiltSet<String>(),
startLocation: model.Location.at(0, 0),
);
ref.read(startTimeProvider.notifier).start();
ref.read(endTimeProvider.notifier).clear();
yield* wordListAsync.when(
data: (wordList) => exploreCrosswordSolutions(
crossword: emptyCrossword,
wordList: wordList,
),
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield emptyWorkQueue;
},
loading: () async* {
yield emptyWorkQueue;
},
);
ref.read(endTimeProvider.notifier).end();
} // To here.
@Riverpod(keepAlive: true) // Add from here to end of file
class StartTime extends _$StartTime {
@override
DateTime? build() => _start;
DateTime? _start;
void start() {
_start = DateTime.now();
ref.invalidateSelf();
}
}
@Riverpod(keepAlive: true)
class EndTime extends _$EndTime {
@override
DateTime? build() => _end;
DateTime? _end;
void clear() {
_end = null;
ref.invalidateSelf();
}
void end() {
_end = DateTime.now();
ref.invalidateSelf();
}
}
const _estimatedTotalCoverage = 0.54;
@riverpod
Duration expectedRemainingTime(Ref ref) {
final startTime = ref.watch(startTimeProvider);
final endTime = ref.watch(endTimeProvider);
final workQueueAsync = ref.watch(workQueueProvider);
return workQueueAsync.when(
data: (workQueue) {
if (startTime == null || endTime != null || workQueue.isCompleted) {
return Duration.zero;
}
try {
final soFar = DateTime.now().difference(startTime);
final completedPercentage = min(
0.99,
(workQueue.crossword.characters.length /
(workQueue.crossword.width * workQueue.crossword.height) /
_estimatedTotalCoverage),
);
final expectedTotal = soFar.inSeconds / completedPercentage;
final expectedRemaining = expectedTotal - soFar.inSeconds;
return Duration(seconds: expectedRemaining.toInt());
} catch (e) {
return Duration.zero;
}
},
error: (error, stackTrace) => Duration.zero,
loading: () => Duration.zero,
);
}
/// A provider that holds whether to display info.
@Riverpod(keepAlive: true)
class ShowDisplayInfo extends _$ShowDisplayInfo {
var _display = true;
@override
bool build() => _display;
void toggle() {
_display = !_display;
ref.invalidateSelf();
}
}
/// A provider that summarise the DisplayInfo from a [model.WorkQueue].
@riverpod
class DisplayInfo extends _$DisplayInfo {
@override
model.DisplayInfo build() => ref
.watch(workQueueProvider)
.when(
data: (workQueue) => model.DisplayInfo.from(workQueue: workQueue),
error: (error, stackTrace) => model.DisplayInfo.empty,
loading: () => model.DisplayInfo.empty,
);
}
নতুন প্রোভাইডারগুলি বিশ্বব্যাপী অবস্থার মিশ্রণ, যেমন তথ্য প্রদর্শন ক্রসওয়ার্ড গ্রিডের উপরে আচ্ছাদিত করা উচিত কিনা এবং ক্রসওয়ার্ড জেনারেশনের চলমান সময়ের মতো প্রাপ্ত ডেটা। এই সমস্ত কিছু জটিল কারণ এই অবস্থার কিছু শ্রোতা ক্ষণস্থায়ী। তথ্য প্রদর্শন লুকানো থাকলে ক্রসওয়ার্ড গণনার শুরু এবং শেষ সময় শোনার কিছুই নেই, তবে তথ্য প্রদর্শন দেখানোর সময় গণনাটি সঠিক হতে হলে সেগুলিকে মেমরিতে রাখতে হবে। Riverpod অ্যাট্রিবিউটের keepAlive প্যারামিটার এই ক্ষেত্রে খুবই কার্যকর।
তথ্য প্রদর্শন দেখানোর সময়, সামান্য বলিরেখা দেখা যাচ্ছে। আমরা অতিবাহিত রান টাইম দেখানোর ক্ষমতা চাই, কিন্তু এখানে অতিবাহিত সময়ের ক্রমাগত আপডেট জোর করে করার মতো কিছুই নেই। Flutter codelab-এ পরবর্তী প্রজন্মের UI তৈরিতে ফিরে আসার জন্য, এখানে এই প্রয়োজনীয়তার জন্য একটি দরকারী উইজেট রয়েছে।
-
lib/widgetsডিরেক্টরিতে একটিticker_builder.dartফাইল তৈরি করুন এবং তারপরে এতে নিম্নলিখিত সামগ্রী যুক্ত করুন:
lib/widgets/ticker_builder.dart সম্পর্কে
import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';
/// A Builder widget that invokes its [builder] function on every animation frame.
class TickerBuilder extends StatefulWidget {
const TickerBuilder({super.key, required this.builder});
final Widget Function(BuildContext context) builder;
@override
State<TickerBuilder> createState() => _TickerBuilderState();
}
class _TickerBuilderState extends State<TickerBuilder>
with SingleTickerProviderStateMixin {
late final Ticker _ticker;
@override
void initState() {
super.initState();
_ticker = createTicker(_handleTick)..start();
}
@override
void dispose() {
_ticker.dispose();
super.dispose();
}
void _handleTick(Duration elapsed) {
setState(() {
// Force a rebuild without changing the widget tree.
});
}
@override
Widget build(BuildContext context) => widget.builder.call(context);
}
এই উইজেটটি একটি হাতুড়ির মতো। এটি প্রতিটি ফ্রেমে এর বিষয়বস্তু পুনর্নির্মাণ করে। এটি সাধারণত অবহেলা করা হয়, কিন্তু ক্রসওয়ার্ড পাজল অনুসন্ধানের গণনামূলক চাপের সাথে তুলনা করলে, প্রতিটি ফ্রেম পুনরায় রঙ করার সময় অতিবাহিত হওয়ার গণনামূলক চাপ সম্ভবত গোলমালে অদৃশ্য হয়ে যাবে। এই নতুন প্রাপ্ত তথ্যের সুবিধা নিতে, এখন একটি নতুন উইজেট তৈরি করার সময়।
- আপনার
lib/widgetsডিরেক্টরিতে একটিcrossword_info_widget.dartফাইল তৈরি করুন এবং তারপরে এতে নিম্নলিখিত সামগ্রী যুক্ত করুন:
lib/উইজেটস/ক্রসওয়ার্ড_ইনফো_উইজেট.ডার্ট
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers.dart';
import '../utils.dart';
import 'ticker_builder.dart';
class CrosswordInfoWidget extends ConsumerWidget {
const CrosswordInfoWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final size = ref.watch(sizeProvider);
final displayInfo = ref.watch(displayInfoProvider);
final startTime = ref.watch(startTimeProvider);
final endTime = ref.watch(endTimeProvider);
final remaining = ref.watch(expectedRemainingTimeProvider);
return Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 32.0, bottom: 32.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: ColoredBox(
color: Theme.of(context).colorScheme.onPrimary.withAlpha(230),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: DefaultTextStyle(
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.primary,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_CrosswordInfoRichText(
label: 'Grid Size',
value: '${size.width} x ${size.height}',
),
_CrosswordInfoRichText(
label: 'Words in grid',
value: displayInfo.wordsInGridCount,
),
_CrosswordInfoRichText(
label: 'Candidate words',
value: displayInfo.candidateWordsCount,
),
_CrosswordInfoRichText(
label: 'Locations to explore',
value: displayInfo.locationsToExploreCount,
),
_CrosswordInfoRichText(
label: 'Known bad locations',
value: displayInfo.knownBadLocationsCount,
),
_CrosswordInfoRichText(
label: 'Grid filled',
value: displayInfo.gridFilledPercentage,
),
switch ((startTime, endTime)) {
(null, _) => _CrosswordInfoRichText(
label: 'Time elapsed',
value: 'Not started yet',
),
(DateTime start, null) => TickerBuilder(
builder: (context) => _CrosswordInfoRichText(
label: 'Time elapsed',
value: DateTime.now().difference(start).formatted,
),
),
(DateTime start, DateTime end) => _CrosswordInfoRichText(
label: 'Completed in',
value: end.difference(start).formatted,
),
},
if (startTime != null && endTime == null)
_CrosswordInfoRichText(
label: 'Est. remaining',
value: remaining.formatted,
),
],
),
),
),
),
),
),
);
}
}
class _CrosswordInfoRichText extends StatelessWidget {
final String label;
final String value;
const _CrosswordInfoRichText({required this.label, required this.value});
@override
Widget build(BuildContext context) => RichText(
text: TextSpan(
children: [
TextSpan(text: '$label ', style: DefaultTextStyle.of(context).style),
TextSpan(
text: value,
style: DefaultTextStyle.of(
context,
).style.copyWith(fontWeight: FontWeight.bold),
),
],
),
);
}
এই উইজেটটি রিভারপডের প্রোভাইডারদের ক্ষমতার একটি উৎকৃষ্ট উদাহরণ। পাঁচটি প্রোভাইডার আপডেট হলে এই উইজেটটি পুনর্নির্মাণের জন্য চিহ্নিত করা হবে। এই ধাপে সর্বশেষ প্রয়োজনীয় পরিবর্তন হল এই নতুন উইজেটটিকে UI-তে একীভূত করা।
- আপনার
crossword_generator_app.dartফাইলটি নিম্নরূপ সম্পাদনা করুন:
lib/উইজেটস/ক্রসওয়ার্ড_জেনারেটর_অ্যাপ.ডার্ট
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers.dart';
import 'crossword_info_widget.dart'; // Add this import
import 'crossword_widget.dart';
class CrosswordGeneratorApp extends StatelessWidget {
const CrosswordGeneratorApp({super.key});
@override
Widget build(BuildContext context) {
return _EagerInitialization(
child: Scaffold(
appBar: AppBar(
actions: [_CrosswordGeneratorMenu()],
titleTextStyle: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
title: Text('Crossword Generator'),
),
body: SafeArea(
child: Consumer( // Modify from here
builder: (context, ref, child) {
return Stack(
children: [
Positioned.fill(child: CrosswordWidget()),
if (ref.watch(showDisplayInfoProvider)) CrosswordInfoWidget(),
],
);
},
), // To here.
),
),
);
}
}
class _EagerInitialization extends ConsumerWidget {
const _EagerInitialization({required this.child});
final Widget child;
@override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(wordListProvider);
return child;
}
}
class _CrosswordGeneratorMenu extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) => MenuAnchor(
menuChildren: [
for (final entry in CrosswordSize.values)
MenuItemButton(
onPressed: () => ref.read(sizeProvider.notifier).setSize(entry),
leadingIcon: entry == ref.watch(sizeProvider)
? Icon(Icons.radio_button_checked_outlined)
: Icon(Icons.radio_button_unchecked_outlined),
child: Text(entry.label),
),
MenuItemButton( // Add from here
leadingIcon: ref.watch(showDisplayInfoProvider)
? Icon(Icons.check_box_outlined)
: Icon(Icons.check_box_outline_blank_outlined),
onPressed: () => ref.read(showDisplayInfoProvider.notifier).toggle(),
child: Text('Display Info'),
), // To here.
],
builder: (context, controller, child) => IconButton(
onPressed: () => controller.open(),
icon: Icon(Icons.settings),
),
);
}
এখানে দুটি পরিবর্তন প্রদানকারীদের একীভূত করার বিভিন্ন পদ্ধতি প্রদর্শন করে। CrosswordGeneratorApp এর build পদ্ধতিতে, আপনি একটি নতুন Consumer বিল্ডার চালু করেছেন যাতে তথ্য প্রদর্শন প্রদর্শিত বা লুকানো হলে পুনর্নির্মাণ করতে বাধ্য করা এলাকাটি ধারণ করা যায়। অন্যদিকে, পুরো ড্রপ-ডাউন মেনুটি হল একটি ConsumerWidget , যা ক্রসওয়ার্ডের আকার পরিবর্তন করা হোক বা তথ্য প্রদর্শন দেখানো বা লুকানো হোক না কেন পুনর্নির্মাণ করা হবে। কোন পদ্ধতিটি গ্রহণ করবেন তা সর্বদা সরলতার সাথে পুনর্নির্মাণ উইজেট গাছের লেআউট পুনর্গণনার খরচের একটি ইঞ্জিনিয়ারিং বিনিময়।
এখন অ্যাপটি চালানোর মাধ্যমে ব্যবহারকারী ক্রসওয়ার্ড জেনারেশন কীভাবে এগিয়ে চলেছে সে সম্পর্কে আরও অন্তর্দৃষ্টি পাবেন। যাইহোক, ক্রসওয়ার্ড জেনারেশনের শেষের দিকে আমরা দেখতে পাই যে এমন একটি সময়কাল রয়েছে যেখানে সংখ্যাগুলি পরিবর্তিত হচ্ছে, কিন্তু অক্ষরের গ্রিডে খুব কম পরিবর্তন দেখা যাচ্ছে।
কী ঘটছে এবং কেন ঘটছে সে সম্পর্কে অতিরিক্ত অন্তর্দৃষ্টি পাওয়া কার্যকর হবে।
৮. সুতোর সাথে সমান্তরাল করুন
কেন কর্মক্ষমতা হ্রাস পায়
ক্রসওয়ার্ড যতই শেষের দিকে এগোচ্ছে, অ্যালগরিদম ততই ধীর হয়ে যাচ্ছে কারণ শব্দ বসানোর জন্য বৈধ বিকল্পের সংখ্যা কম। অ্যালগরিদম অনেক সমন্বয় চেষ্টা করে যা কাজ করবে না। একক-থ্রেডেড প্রক্রিয়াকরণ দক্ষতার সাথে একাধিক বিকল্প অন্বেষণ করতে পারে না।
অ্যালগরিদম ভিজ্যুয়ালাইজ করা
শেষের দিকে জিনিসগুলি কেন ধীর হয়ে যায় তা বোঝার জন্য, অ্যালগরিদম কী করছে তা কল্পনা করতে সক্ষম হওয়া দরকারী। একটি গুরুত্বপূর্ণ অংশ হল WorkQueue তে অসামান্য locationsToTry । TableView আমাদের এটি তদন্ত করার একটি কার্যকর উপায় দেয়। আমরা locationsToTry তে আছে কিনা তার উপর ভিত্তি করে ঘরের রঙ পরিবর্তন করতে পারি।
শুরু করতে, এই পদক্ষেপগুলি অনুসরণ করুন:
-
crossword_widget.dartফাইলটি নিম্নরূপ পরিবর্তন করুন:
lib/উইজেটস/ক্রসওয়ার্ড_উইজেট.ডার্ট
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:two_dimensional_scrollables/two_dimensional_scrollables.dart';
import '../model.dart';
import '../providers.dart';
class CrosswordWidget extends ConsumerWidget {
const CrosswordWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final size = ref.watch(sizeProvider);
return TableView.builder(
diagonalDragBehavior: DiagonalDragBehavior.free,
cellBuilder: _buildCell,
columnCount: size.width,
columnBuilder: (index) => _buildSpan(context, index),
rowCount: size.height,
rowBuilder: (index) => _buildSpan(context, index),
);
}
TableViewCell _buildCell(BuildContext context, TableVicinity vicinity) {
final location = Location.at(vicinity.column, vicinity.row);
return TableViewCell(
child: Consumer(
builder: (context, ref, _) {
final character = ref.watch(
workQueueProvider.select(
(workQueueAsync) => workQueueAsync.when(
data: (workQueue) => workQueue.crossword.characters[location],
error: (error, stackTrace) => null,
loading: () => null,
),
),
);
final explorationCell = ref.watch( // Add from here
workQueueProvider.select(
(workQueueAsync) => workQueueAsync.when(
data: (workQueue) =>
workQueue.locationsToTry.keys.contains(location),
error: (error, stackTrace) => false,
loading: () => false,
),
),
); // To here.
if (character != null) { // Modify from here
return AnimatedContainer(
duration: Durations.extralong1,
curve: Curves.easeInOut,
color: explorationCell
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.onPrimary,
child: Center(
child: AnimatedDefaultTextStyle(
duration: Durations.extralong1,
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 24,
color: explorationCell
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.primary,
),
child: Text(character.character),
), // To here.
),
);
}
return ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
);
},
),
);
}
TableSpan _buildSpan(BuildContext context, int index) {
return TableSpan(
extent: FixedTableSpanExtent(32),
foregroundDecoration: TableSpanDecoration(
border: TableSpanBorder(
leading: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
trailing: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
),
);
}
}
এই কোডটি চালানোর সময়, আপনি অ্যালগরিদম এখনও যে অসামান্য অবস্থানগুলি তদন্ত করেনি তার একটি ভিজ্যুয়ালাইজেশন দেখতে পাবেন।
ক্রসওয়ার্ড সমাপ্তির দিকে এগিয়ে যাওয়ার সাথে সাথে এটি দেখার মজার বিষয় হল যে তদন্তের জন্য এমন অনেক পয়েন্ট বাকি আছে যার ফলে কোনও কার্যকর ফলাফল আসবে না। এখানে কয়েকটি বিকল্প রয়েছে; একটি হল ক্রসওয়ার্ড সেলের একটি নির্দিষ্ট শতাংশ পূরণ করার পরে তদন্ত সীমিত করা এবং দ্বিতীয়টি হল একসাথে একাধিক আগ্রহের বিষয় অনুসন্ধান করা। দ্বিতীয় পথটি আরও মজাদার শোনাচ্ছে, তাই এটি করার সময় এসেছে।
-
isolates.dartফাইলটি সম্পাদনা করুন। এটি প্রায় সম্পূর্ণ কোড পুনর্লিখন, যা একটি ব্যাকগ্রাউন্ড আইসোলেটে গণনা করা হচ্ছিল তা N ব্যাকগ্রাউন্ড আইসোলেটের একটি পুলে বিভক্ত করে।
lib/isolates.dart সম্পর্কে
import 'package:built_collection/built_collection.dart';
import 'package:characters/characters.dart';
import 'package:flutter/foundation.dart';
import 'model.dart';
import 'utils.dart';
Stream<WorkQueue> exploreCrosswordSolutions({
required Crossword crossword,
required BuiltSet<String> wordList,
required int maxWorkerCount,
}) async* {
final start = DateTime.now();
var workQueue = WorkQueue.from(
crossword: crossword,
candidateWords: wordList,
startLocation: Location.at(0, 0),
);
while (!workQueue.isCompleted) {
try {
workQueue = await compute(_generate, (workQueue, maxWorkerCount));
yield workQueue;
} catch (e) {
debugPrint('Error running isolate: $e');
}
}
debugPrint(
'Generated ${workQueue.crossword.width} x '
'${workQueue.crossword.height} crossword in '
'${DateTime.now().difference(start).formatted} '
'with $maxWorkerCount workers.',
);
}
Future<WorkQueue> _generate((WorkQueue, int) workMessage) async {
var (workQueue, maxWorkerCount) = workMessage;
final candidateGeneratorFutures = <Future<(Location, Direction, String?)>>[];
final locations = workQueue.locationsToTry.keys.toBuiltList().rebuild(
(b) => b
..shuffle()
..take(maxWorkerCount),
);
for (final location in locations) {
final direction = workQueue.locationsToTry[location]!;
candidateGeneratorFutures.add(
compute(_generateCandidate, (
workQueue.crossword,
workQueue.candidateWords,
location,
direction,
)),
);
}
try {
final results = await candidateGeneratorFutures.wait;
var crossword = workQueue.crossword;
for (final (location, direction, word) in results) {
if (word != null) {
final candidate = crossword.addWord(
location: location,
word: word,
direction: direction,
);
if (candidate != null) {
crossword = candidate;
}
} else {
workQueue = workQueue.remove(location);
}
}
workQueue = workQueue.updateFrom(crossword);
} catch (e) {
debugPrint('$e');
}
return workQueue;
}
(Location, Direction, String?) _generateCandidate(
(Crossword, BuiltSet<String>, Location, Direction) searchDetailMessage,
) {
final (crossword, candidateWords, location, direction) = searchDetailMessage;
final target = crossword.characters[location];
if (target == null) {
return (location, direction, candidateWords.randomElement());
}
// Filter down the candidate word list to those that contain the letter
// at the current location
final words = candidateWords.toBuiltList().rebuild(
(b) => b
..where((b) => b.characters.contains(target.character))
..shuffle(),
);
int tryCount = 0;
final start = DateTime.now();
for (final word in words) {
tryCount++;
for (final (index, character) in word.characters.indexed) {
if (character != target.character) continue;
final candidate = crossword.addWord(
location: switch (direction) {
Direction.across => location.leftOffset(index),
Direction.down => location.upOffset(index),
},
word: word,
direction: direction,
);
if (candidate != null) {
return switch (direction) {
Direction.across => (location.leftOffset(index), direction, word),
Direction.down => (location.upOffset(index), direction, word),
};
}
final deltaTime = DateTime.now().difference(start);
if (tryCount >= 1000 || deltaTime > Duration(seconds: 10)) {
return (location, direction, null);
}
}
}
return (location, direction, null);
}
মাল্টি-আইসোলেট স্থাপত্য বোঝা
এই কোডের বেশিরভাগই পরিচিত হওয়া উচিত কারণ মূল ব্যবসায়িক যুক্তি পরিবর্তিত হয়নি। যা পরিবর্তিত হয়েছে তা হল এখন compute কলের দুটি স্তর রয়েছে। প্রথম স্তরটি N কর্মী আইসোলেটগুলিতে অনুসন্ধানের জন্য পৃথক অবস্থানগুলি তৈরি করার জন্য দায়ী, এবং তারপরে সমস্ত N কর্মী আইসোলেট শেষ হয়ে গেলে ফলাফলগুলি পুনরায় একত্রিত করার জন্য। দ্বিতীয় স্তরটি N কর্মী আইসোলেটগুলি নিয়ে গঠিত। সর্বোত্তম কর্মক্ষমতা পেতে N টিউন করা আপনার কম্পিউটার এবং প্রশ্নে থাকা ডেটা উভয়ের উপর নির্ভর করে। গ্রিড যত বড় হবে, তত বেশি কর্মী একে অপরের পথে না গিয়ে একসাথে কাজ করতে পারবেন।
একটি আকর্ষণীয় বিষয় হলো, এই কোডটি এখন ক্লোজার ব্যবহার করে এমন জিনিস ক্যাপচার করার সমস্যাটি কীভাবে মোকাবেলা করে যা তাদের ক্যাপচার করা উচিত নয়। এখন আর কোনও ক্লোজার নেই। _generate এবং _generateWorker ফাংশনগুলিকে শীর্ষ-স্তরের ফাংশন হিসাবে সংজ্ঞায়িত করা হয়, যেগুলির ক্যাপচার করার জন্য কোনও পার্শ্ববর্তী পরিবেশ নেই। এই দুটি ফাংশনের মধ্যে যুক্তি এবং ফলাফল ডার্ট রেকর্ডের আকারে। এটি compute কলের এক মান, এক মান আউট শব্দার্থবিদ্যার চারপাশে কাজ করার একটি উপায়।
এখন যেহেতু আপনার কাছে ব্যাকগ্রাউন্ড কর্মীদের একটি পুল তৈরি করার ক্ষমতা আছে যারা একটি গ্রিডে ইন্টারলক করে একটি ক্রসওয়ার্ড ধাঁধা তৈরি করে এমন শব্দগুলি অনুসন্ধান করার জন্য, এখন সময় এসেছে ক্রসওয়ার্ড জেনারেটর টুলের বাকি অংশে সেই ক্ষমতাটি প্রকাশ করার।
- workQueue প্রোভাইডারটি নিম্নরূপ সম্পাদনা করে
providers.dartফাইলটি সম্পাদনা করুন:
lib/providers.dart সম্পর্কে
@riverpod
Stream<model.WorkQueue> workQueue(Ref ref) async* {
final workers = ref.watch(workerCountProvider); // Add this line
final size = ref.watch(sizeProvider);
final wordListAsync = ref.watch(wordListProvider);
final emptyCrossword = model.Crossword.crossword(
width: size.width,
height: size.height,
);
final emptyWorkQueue = model.WorkQueue.from(
crossword: emptyCrossword,
candidateWords: BuiltSet<String>(),
startLocation: model.Location.at(0, 0),
);
ref.read(startTimeProvider.notifier).start();
ref.read(endTimeProvider.notifier).clear();
yield* wordListAsync.when(
data: (wordList) => exploreCrosswordSolutions(
crossword: emptyCrossword,
wordList: wordList,
maxWorkerCount: workers.count, // Add this line
),
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield emptyWorkQueue;
},
loading: () async* {
yield emptyWorkQueue;
},
);
ref.read(endTimeProvider.notifier).end();
}
- ফাইলের শেষে
WorkerCountপ্রদানকারী যোগ করুন নিম্নরূপ:
lib/providers.dart সম্পর্কে
/// A provider that summarise the DisplayInfo from a [model.WorkQueue].
@riverpod
class DisplayInfo extends _$DisplayInfo {
@override
model.DisplayInfo build() => ref
.watch(workQueueProvider)
.when(
data: (workQueue) => model.DisplayInfo.from(workQueue: workQueue),
error: (error, stackTrace) => model.DisplayInfo.empty,
loading: () => model.DisplayInfo.empty,
);
}
enum BackgroundWorkers { // Add from here
one(1),
two(2),
four(4),
eight(8),
sixteen(16),
thirtyTwo(32),
sixtyFour(64),
oneTwentyEight(128);
const BackgroundWorkers(this.count);
final int count;
String get label => count.toString();
}
/// A provider that holds the current number of background workers to use.
@Riverpod(keepAlive: true)
class WorkerCount extends _$WorkerCount {
var _count = BackgroundWorkers.four;
@override
BackgroundWorkers build() => _count;
void setCount(BackgroundWorkers count) {
_count = count;
ref.invalidateSelf();
}
} // To here.
With these two changes, the provider layer now exposes a way to set the maximum worker count for the background isolate pool in a way that the isolate functions are correctly configured.
- Update the
crossword_info_widget.dartfile by modifying theCrosswordInfoWidgetas follows:
lib/widgets/crossword_info_widget.dart
class CrosswordInfoWidget extends ConsumerWidget {
const CrosswordInfoWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final size = ref.watch(sizeProvider);
final displayInfo = ref.watch(displayInfoProvider);
final workerCount = ref.watch(workerCountProvider).label; // Add this line
final startTime = ref.watch(startTimeProvider);
final endTime = ref.watch(endTimeProvider);
final remaining = ref.watch(expectedRemainingTimeProvider);
return Align(
alignment: Alignment.bottomRight,
child: Padding(
padding: const EdgeInsets.only(right: 32.0, bottom: 32.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(8),
child: ColoredBox(
color: Theme.of(context).colorScheme.onPrimary.withAlpha(230),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
child: DefaultTextStyle(
style: TextStyle(
fontSize: 16,
color: Theme.of(context).colorScheme.primary,
),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_CrosswordInfoRichText(
label: 'Grid Size',
value: '${size.width} x ${size.height}',
),
_CrosswordInfoRichText(
label: 'Words in grid',
value: displayInfo.wordsInGridCount,
),
_CrosswordInfoRichText(
label: 'Candidate words',
value: displayInfo.candidateWordsCount,
),
_CrosswordInfoRichText(
label: 'Locations to explore',
value: displayInfo.locationsToExploreCount,
),
_CrosswordInfoRichText(
label: 'Known bad locations',
value: displayInfo.knownBadLocationsCount,
),
_CrosswordInfoRichText(
label: 'Grid filled',
value: displayInfo.gridFilledPercentage,
),
_CrosswordInfoRichText( // Add from here
label: 'Max worker count',
value: workerCount,
), // To here.
switch ((startTime, endTime)) {
(null, _) => _CrosswordInfoRichText(
label: 'Time elapsed',
value: 'Not started yet',
),
(DateTime start, null) => TickerBuilder(
builder: (context) => _CrosswordInfoRichText(
label: 'Time elapsed',
value: DateTime.now().difference(start).formatted,
),
),
(DateTime start, DateTime end) => _CrosswordInfoRichText(
label: 'Completed in',
value: end.difference(start).formatted,
),
},
if (startTime != null && endTime == null)
_CrosswordInfoRichText(
label: 'Est. remaining',
value: remaining.formatted,
),
],
),
),
),
),
),
),
);
}
}
- Modify the
crossword_generator_app.dartfile by adding the following section to the_CrosswordGeneratorMenuwidget:
lib/widgets/crossword_generator_app.dart
class _CrosswordGeneratorMenu extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) => MenuAnchor(
menuChildren: [
for (final entry in CrosswordSize.values)
MenuItemButton(
onPressed: () => ref.read(sizeProvider.notifier).setSize(entry),
leadingIcon: entry == ref.watch(sizeProvider)
? Icon(Icons.radio_button_checked_outlined)
: Icon(Icons.radio_button_unchecked_outlined),
child: Text(entry.label),
),
MenuItemButton(
leadingIcon: ref.watch(showDisplayInfoProvider)
? Icon(Icons.check_box_outlined)
: Icon(Icons.check_box_outline_blank_outlined),
onPressed: () => ref.read(showDisplayInfoProvider.notifier).toggle(),
child: Text('Display Info'),
),
for (final count in BackgroundWorkers.values) // Add from here
MenuItemButton(
leadingIcon: count == ref.watch(workerCountProvider)
? Icon(Icons.radio_button_checked_outlined)
: Icon(Icons.radio_button_unchecked_outlined),
onPressed: () =>
ref.read(workerCountProvider.notifier).setCount(count),
child: Text(count.label), // To here.
),
],
builder: (context, controller, child) => IconButton(
onPressed: () => controller.open(),
icon: Icon(Icons.settings),
),
);
}
If you run the app now, you will be able to modify the number of background isolates being instantiated to search for words to slot into the crossword.
- Click the gear icon in the to open the contextual menu containing sizing for the crossword, whether to display the statistics on the generated crossword, and now, the number of isolates to use.
Checkpoint: Multi-threaded Performance
Running the crossword generator has significantly reduced the compute time for an 80x44 crossword by using multiple cores concurrently. You should notice:
- Faster crossword generation with higher worker counts
- Smooth UI responsiveness during generation
- Real-time statistics showing generation progress
- Visual feedback of algorithm exploration areas
9. Turn it into a game
What we're building: A Playable Crossword Game
This last section is really a bonus round. You will take all the techniques you have learned while constructing the crossword generator and use these techniques to build a game. You will:
- Generate puzzles : Use the crossword generator to create solvable puzzles
- Create word choices : Provide multiple word options for each position
- Enable interaction : Let users select and place words
- Validate solutions : Check if the completed crossword is correct
You will use the crossword generator to create a crossword puzzle. You will reuse the contextual menu idioms to enable the user to select and deselect words to put in the various word-shaped holes in the grid. All with the aim of completing the crossword.
I'm not going to say this game is polished or finished, it's far from in fact. There are balance and difficulty issues which can be solved with improving the choice of alternate words. There is no tutorial to lead users into the puzzle. I'm not even going to mention the bare bones "You've won!" screen.
The tradeoff here is that to properly polish this proto-game into a full game will take significantly more code. More code than should be in a single codelab. So, instead, this is a speed run step designed to reinforce the techniques learned so far in this codelab by changing where and how they are used. Hopefully this reinforces the lessons learned earlier in this codelab. Alternatively, you can go ahead and build your own experiences based on this code. We'd love to see what you build!
To begin, follow these steps:
- Delete everything in the
lib/widgetsdirectory. You will be creating shiny new widgets for your game. That just happens to borrow a lot from the old widgets.
- Edit your
model.dartfile to updateCrossword'saddWordmethod as follows:
lib/model.dart
/// Add a word to the crossword at the given location and direction.
Crossword? addWord({
required Location location,
required String word,
required Direction direction,
bool requireOverlap = true, // Add this parameter
}) {
// Require that the word is not already in the crossword.
if (words.map((crosswordWord) => crosswordWord.word).contains(word)) {
return null;
}
final wordCharacters = word.characters;
bool overlap = false;
// Check that the word fits in the crossword.
for (final (index, character) in wordCharacters.indexed) {
final characterLocation = switch (direction) {
Direction.across => location.rightOffset(index),
Direction.down => location.downOffset(index),
};
final target = characters[characterLocation];
if (target != null) {
overlap = true;
if (target.character != character) {
return null;
}
if (direction == Direction.across && target.acrossWord != null ||
direction == Direction.down && target.downWord != null) {
return null;
}
}
}
// Edit from here
// If overlap is required, make sure that the word overlaps with an existing
// word. Skip this test if the crossword is empty.
if (words.isNotEmpty && !overlap && requireOverlap) { // To here.
return null;
}
final candidate = rebuild(
(b) => b
..words.add(
CrosswordWord.word(
word: word,
direction: direction,
location: location,
),
),
);
if (candidate.valid) {
return candidate;
} else {
return null;
}
}
This minor modification of your Crossword model enables words to be added that don't overlap. It's useful to allow players to play anywhere on a board and still be able to use Crossword as a base model for storing the player's moves. It is just a list of words at specific locations placed in a specific direction.
- Add the
CrosswordPuzzleGamemodel class to the end of yourmodel.dartfile.
lib/model.dart
/// Creates a puzzle from a crossword and a set of candidate words.
abstract class CrosswordPuzzleGame
implements Built<CrosswordPuzzleGame, CrosswordPuzzleGameBuilder> {
static Serializer<CrosswordPuzzleGame> get serializer =>
_$crosswordPuzzleGameSerializer;
/// The [Crossword] that this puzzle is based on.
Crossword get crossword;
/// The alternate words for each [CrosswordWord] in the crossword.
BuiltMap<Location, BuiltMap<Direction, BuiltList<String>>> get alternateWords;
/// The player's selected words.
BuiltList<CrosswordWord> get selectedWords;
bool canSelectWord({
required Location location,
required String word,
required Direction direction,
}) {
final crosswordWord = CrosswordWord.word(
word: word,
location: location,
direction: direction,
);
if (selectedWords.contains(crosswordWord)) {
return true;
}
var puzzle = this;
if (puzzle.selectedWords
.where((b) => b.direction == direction && b.location == location)
.isNotEmpty) {
puzzle = puzzle.rebuild(
(b) => b
..selectedWords.removeWhere(
(selectedWord) =>
selectedWord.location == location &&
selectedWord.direction == direction,
),
);
}
return null !=
puzzle.crosswordFromSelectedWords.addWord(
location: location,
word: word,
direction: direction,
requireOverlap: false,
);
}
CrosswordPuzzleGame? selectWord({
required Location location,
required String word,
required Direction direction,
}) {
final crosswordWord = CrosswordWord.word(
word: word,
location: location,
direction: direction,
);
if (selectedWords.contains(crosswordWord)) {
return rebuild((b) => b.selectedWords.remove(crosswordWord));
}
var puzzle = this;
if (puzzle.selectedWords
.where((b) => b.direction == direction && b.location == location)
.isNotEmpty) {
puzzle = puzzle.rebuild(
(b) => b
..selectedWords.removeWhere(
(selectedWord) =>
selectedWord.location == location &&
selectedWord.direction == direction,
),
);
}
// Check if the selected word meshes with the already selected words.
// Note this version of the crossword does not enforce overlap to
// allow the player to select words anywhere on the grid. Enforcing words
// to be solved in order is a possible alternative.
final updatedSelectedWordsCrossword = puzzle.crosswordFromSelectedWords
.addWord(
location: location,
word: word,
direction: direction,
requireOverlap: false,
);
// Make sure the selected word is in the crossword or is an alternate word.
if (updatedSelectedWordsCrossword != null) {
if (puzzle.crossword.words.contains(crosswordWord) ||
puzzle.alternateWords[location]?[direction]?.contains(word) == true) {
return puzzle.rebuild(
(b) => b
..selectedWords.add(
CrosswordWord.word(
word: word,
location: location,
direction: direction,
),
),
);
}
}
return null;
}
/// The crossword from the selected words.
Crossword get crosswordFromSelectedWords => Crossword.crossword(
width: crossword.width,
height: crossword.height,
words: selectedWords,
);
/// Test if the puzzle is solved. Note, this allows for the possibility of
/// multiple solutions.
bool get solved =>
crosswordFromSelectedWords.valid &&
crosswordFromSelectedWords.words.length == crossword.words.length &&
crossword.words.isNotEmpty;
/// Create a crossword puzzle game from a crossword and a set of candidate
/// words.
factory CrosswordPuzzleGame.from({
required Crossword crossword,
required BuiltSet<String> candidateWords,
}) {
// Remove all of the currently used words from the list of candidates
candidateWords = candidateWords.rebuild(
(p0) => p0.removeAll(crossword.words.map((p1) => p1.word)),
);
// This is the list of alternate words for each word in the crossword
var alternates =
BuiltMap<Location, BuiltMap<Direction, BuiltList<String>>>();
// Build the alternate words for each word in the crossword
for (final crosswordWord in crossword.words) {
final alternateWords = candidateWords.toBuiltList().rebuild(
(b) => b
..where((b) => b.length == crosswordWord.word.length)
..shuffle()
..take(4)
..sort(),
);
candidateWords = candidateWords.rebuild(
(b) => b.removeAll(alternateWords),
);
alternates = alternates.rebuild(
(b) => b.updateValue(
crosswordWord.location,
(b) => b.rebuild(
(b) => b.updateValue(
crosswordWord.direction,
(b) => b.rebuild((b) => b.replace(alternateWords)),
ifAbsent: () => alternateWords,
),
),
ifAbsent: () => {crosswordWord.direction: alternateWords}.build(),
),
);
}
return CrosswordPuzzleGame((b) {
b
..crossword.replace(crossword)
..alternateWords.replace(alternates);
});
}
factory CrosswordPuzzleGame([
void Function(CrosswordPuzzleGameBuilder)? updates,
]) = _$CrosswordPuzzleGame;
CrosswordPuzzleGame._();
}
/// Construct the serialization/deserialization code for the data model.
@SerializersFor([
Location,
Crossword,
CrosswordWord,
CrosswordCharacter,
WorkQueue,
DisplayInfo,
CrosswordPuzzleGame, // Add this line
])
final Serializers serializers = _$serializers;
The updates to the providers.dart file are an interesting grab bag of changes. Most of the providers that were present to support statistics gathering have been removed. The ability to change the number of background isolates has been removed and replaced with a constant. There is also a new provider that gives access to the new CrosswordPuzzleGame model you added previously.
lib/providers.dart
import 'dart:convert';
// Drop the dart:math import
import 'package:built_collection/built_collection.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:riverpod/riverpod.dart';
import 'package:riverpod_annotation/riverpod_annotation.dart';
import 'isolates.dart';
import 'model.dart' as model;
part 'providers.g.dart';
const backgroundWorkerCount = 4; // Add this line
/// A provider for the wordlist to use when generating the crossword.
@riverpod
Future<BuiltSet<String>> wordList(Ref ref) async {
// This codebase requires that all words consist of lowercase characters
// in the range 'a'-'z'. Words containing uppercase letters will be
// lowercased, and words containing runes outside this range will
// be removed.
final re = RegExp(r'^[a-z]+$');
final words = await rootBundle.loadString('assets/words.txt');
return const LineSplitter()
.convert(words)
.toBuiltSet()
.rebuild(
(b) => b
..map((word) => word.toLowerCase().trim())
..where((word) => word.length > 2)
..where((word) => re.hasMatch(word)),
);
}
/// An enumeration for different sizes of [model.Crossword]s.
enum CrosswordSize {
small(width: 20, height: 11),
medium(width: 40, height: 22),
large(width: 80, height: 44),
xlarge(width: 160, height: 88),
xxlarge(width: 500, height: 500);
const CrosswordSize({required this.width, required this.height});
final int width;
final int height;
String get label => '$width x $height';
}
/// A provider that holds the current size of the crossword to generate.
@Riverpod(keepAlive: true)
class Size extends _$Size {
var _size = CrosswordSize.medium;
@override
CrosswordSize build() => _size;
void setSize(CrosswordSize size) {
_size = size;
ref.invalidateSelf();
}
}
@riverpod
Stream<model.WorkQueue> workQueue(Ref ref) async* {
final size = ref.watch(sizeProvider); // Drop the ref.watch(workerCountProvider)
final wordListAsync = ref.watch(wordListProvider);
final emptyCrossword = model.Crossword.crossword(
width: size.width,
height: size.height,
);
final emptyWorkQueue = model.WorkQueue.from(
crossword: emptyCrossword,
candidateWords: BuiltSet<String>(),
startLocation: model.Location.at(0, 0),
);
// Drop the startTimeProvider and endTimeProvider refs
yield* wordListAsync.when(
data: (wordList) => exploreCrosswordSolutions(
crossword: emptyCrossword,
wordList: wordList,
maxWorkerCount: backgroundWorkerCount, // Edit this line
),
error: (error, stackTrace) async* {
debugPrint('Error loading word list: $error');
yield emptyWorkQueue;
},
loading: () async* {
yield emptyWorkQueue;
},
);
} // Drop the endTimeProvider ref
@riverpod // Add from here to end of file
class Puzzle extends _$Puzzle {
model.CrosswordPuzzleGame _puzzle = model.CrosswordPuzzleGame.from(
crossword: model.Crossword.crossword(width: 0, height: 0),
candidateWords: BuiltSet<String>(),
);
@override
model.CrosswordPuzzleGame build() {
final size = ref.watch(sizeProvider);
final wordList = ref.watch(wordListProvider).value;
final workQueue = ref.watch(workQueueProvider).value;
if (wordList != null &&
workQueue != null &&
workQueue.isCompleted &&
(_puzzle.crossword.height != size.height ||
_puzzle.crossword.width != size.width ||
_puzzle.crossword != workQueue.crossword)) {
compute(_puzzleFromCrosswordTrampoline, (
workQueue.crossword,
wordList,
)).then((puzzle) {
_puzzle = puzzle;
ref.invalidateSelf();
});
}
return _puzzle;
}
Future<void> selectWord({
required model.Location location,
required String word,
required model.Direction direction,
}) async {
final candidate = await compute(_puzzleSelectWordTrampoline, (
_puzzle,
location,
word,
direction,
));
if (candidate != null) {
_puzzle = candidate;
ref.invalidateSelf();
} else {
debugPrint('Invalid word selection: $word');
}
}
bool canSelectWord({
required model.Location location,
required String word,
required model.Direction direction,
}) {
return _puzzle.canSelectWord(
location: location,
word: word,
direction: direction,
);
}
}
// Trampoline functions to disentangle these Isolate target calls from the
// unsendable reference to the [Puzzle] provider.
Future<model.CrosswordPuzzleGame> _puzzleFromCrosswordTrampoline(
(model.Crossword, BuiltSet<String>) args,
) async =>
model.CrosswordPuzzleGame.from(crossword: args.$1, candidateWords: args.$2);
model.CrosswordPuzzleGame? _puzzleSelectWordTrampoline(
(model.CrosswordPuzzleGame, model.Location, String, model.Direction) args,
) => args.$1.selectWord(location: args.$2, word: args.$3, direction: args.$4);
The most interesting parts of the Puzzle provider are the stratagems undertaken to gloss over the expense of creating the CrosswordPuzzleGame from a Crossword and a wordList , and the expense of selecting a word. Both of these actions when undertaken without the aid of a background Isolate cause sluggish UI interaction. By using some sleight of hand to push out an intermediate result while computing the final result in the background, you wind up with a responsive UI while the required computations are taking place in the background.
- In the now-empty
lib/widgetsdirectory, create acrossword_puzzle_app.dartfile with the following content:
lib/widgets/crossword_puzzle_app.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../providers.dart';
import 'crossword_generator_widget.dart';
import 'crossword_puzzle_widget.dart';
import 'puzzle_completed_widget.dart';
class CrosswordPuzzleApp extends StatelessWidget {
const CrosswordPuzzleApp({super.key});
@override
Widget build(BuildContext context) {
return _EagerInitialization(
child: Scaffold(
appBar: AppBar(
actions: [_CrosswordPuzzleAppMenu()],
titleTextStyle: TextStyle(
color: Theme.of(context).colorScheme.primary,
fontSize: 16,
fontWeight: FontWeight.bold,
),
title: Text('Crossword Puzzle'),
),
body: SafeArea(
child: Consumer(
builder: (context, ref, _) {
final workQueueAsync = ref.watch(workQueueProvider);
final puzzleSolved = ref.watch(
puzzleProvider.select((puzzle) => puzzle.solved),
);
return workQueueAsync.when(
data: (workQueue) {
if (puzzleSolved) {
return PuzzleCompletedWidget();
}
if (workQueue.isCompleted &&
workQueue.crossword.characters.isNotEmpty) {
return CrosswordPuzzleWidget();
}
return CrosswordGeneratorWidget();
},
loading: () => Center(child: CircularProgressIndicator()),
error: (error, stackTrace) => Center(child: Text('$error')),
);
},
),
),
),
);
}
}
class _EagerInitialization extends ConsumerWidget {
const _EagerInitialization({required this.child});
final Widget child;
@override
Widget build(BuildContext context, WidgetRef ref) {
ref.watch(wordListProvider);
return child;
}
}
class _CrosswordPuzzleAppMenu extends ConsumerWidget {
@override
Widget build(BuildContext context, WidgetRef ref) => MenuAnchor(
menuChildren: [
for (final entry in CrosswordSize.values)
MenuItemButton(
onPressed: () => ref.read(sizeProvider.notifier).setSize(entry),
leadingIcon: entry == ref.watch(sizeProvider)
? Icon(Icons.radio_button_checked_outlined)
: Icon(Icons.radio_button_unchecked_outlined),
child: Text(entry.label),
),
],
builder: (context, controller, child) => IconButton(
onPressed: () => controller.open(),
icon: Icon(Icons.settings),
),
);
}
Most of this file should be fairly familiar by now. Yes, there will be undefined widgets, which you will now start fixing.
- Create a
crossword_generator_widget.dartfile and add the following content to it:
lib/widgets/crossword_generator_widget.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:two_dimensional_scrollables/two_dimensional_scrollables.dart';
import '../model.dart';
import '../providers.dart';
class CrosswordGeneratorWidget extends ConsumerWidget {
const CrosswordGeneratorWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final size = ref.watch(sizeProvider);
return TableView.builder(
diagonalDragBehavior: DiagonalDragBehavior.free,
cellBuilder: _buildCell,
columnCount: size.width,
columnBuilder: (index) => _buildSpan(context, index),
rowCount: size.height,
rowBuilder: (index) => _buildSpan(context, index),
);
}
TableViewCell _buildCell(BuildContext context, TableVicinity vicinity) {
final location = Location.at(vicinity.column, vicinity.row);
return TableViewCell(
child: Consumer(
builder: (context, ref, _) {
final character = ref.watch(
workQueueProvider.select(
(workQueueAsync) => workQueueAsync.when(
data: (workQueue) => workQueue.crossword.characters[location],
error: (error, stackTrace) => null,
loading: () => null,
),
),
);
final explorationCell = ref.watch(
workQueueProvider.select(
(workQueueAsync) => workQueueAsync.when(
data: (workQueue) =>
workQueue.locationsToTry.keys.contains(location),
error: (error, stackTrace) => false,
loading: () => false,
),
),
);
if (character != null) {
return AnimatedContainer(
duration: Durations.extralong1,
curve: Curves.easeInOut,
color: explorationCell
? Theme.of(context).colorScheme.primary
: Theme.of(context).colorScheme.onPrimary,
child: Center(
child: AnimatedDefaultTextStyle(
duration: Durations.extralong1,
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 24,
color: explorationCell
? Theme.of(context).colorScheme.onPrimary
: Theme.of(context).colorScheme.primary,
),
child: Text('•'), // https://www.compart.com/en/unicode/U+2022
),
),
);
}
return ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
);
},
),
);
}
TableSpan _buildSpan(BuildContext context, int index) {
return TableSpan(
extent: FixedTableSpanExtent(32),
foregroundDecoration: TableSpanDecoration(
border: TableSpanBorder(
leading: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
trailing: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
),
);
}
}
This should also be reasonably familiar. The primary difference is that instead of displaying the characters of the words being generated, you are now displaying a unicode character to denote the presence of an unknown character. This really could use some work to improve the aesthetics.
- Create
crossword_puzzle_widget.dartfile and add the following content to it:
lib/widgets/crossword_puzzle_widget.dart
import 'package:built_collection/built_collection.dart';
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:two_dimensional_scrollables/two_dimensional_scrollables.dart';
import '../model.dart';
import '../providers.dart';
class CrosswordPuzzleWidget extends ConsumerWidget {
const CrosswordPuzzleWidget({super.key});
@override
Widget build(BuildContext context, WidgetRef ref) {
final size = ref.watch(sizeProvider);
return TableView.builder(
diagonalDragBehavior: DiagonalDragBehavior.free,
cellBuilder: _buildCell,
columnCount: size.width,
columnBuilder: (index) => _buildSpan(context, index),
rowCount: size.height,
rowBuilder: (index) => _buildSpan(context, index),
);
}
TableViewCell _buildCell(BuildContext context, TableVicinity vicinity) {
final location = Location.at(vicinity.column, vicinity.row);
return TableViewCell(
child: Consumer(
builder: (context, ref, _) {
final character = ref.watch(
puzzleProvider.select(
(puzzle) => puzzle.crossword.characters[location],
),
);
final selectedCharacter = ref.watch(
puzzleProvider.select(
(puzzle) =>
puzzle.crosswordFromSelectedWords.characters[location],
),
);
final alternateWords = ref.watch(
puzzleProvider.select((puzzle) => puzzle.alternateWords),
);
if (character != null) {
final acrossWord = character.acrossWord;
var acrossWords = BuiltList<String>();
if (acrossWord != null) {
acrossWords = acrossWords.rebuild(
(b) => b
..add(acrossWord.word)
..addAll(
alternateWords[acrossWord.location]?[acrossWord
.direction] ??
[],
)
..sort(),
);
}
final downWord = character.downWord;
var downWords = BuiltList<String>();
if (downWord != null) {
downWords = downWords.rebuild(
(b) => b
..add(downWord.word)
..addAll(
alternateWords[downWord.location]?[downWord.direction] ??
[],
)
..sort(),
);
}
return MenuAnchor(
builder: (context, controller, _) {
return GestureDetector(
onTapDown: (details) =>
controller.open(position: details.localPosition),
child: AnimatedContainer(
duration: Durations.extralong1,
curve: Curves.easeInOut,
color: Theme.of(context).colorScheme.onPrimary,
child: Center(
child: AnimatedDefaultTextStyle(
duration: Durations.extralong1,
curve: Curves.easeInOut,
style: TextStyle(
fontSize: 24,
color: Theme.of(context).colorScheme.primary,
),
child: Text(selectedCharacter?.character ?? ''),
),
),
),
);
},
menuChildren: [
if (acrossWords.isNotEmpty && downWords.isNotEmpty)
Padding(
padding: const EdgeInsets.all(4),
child: Text('Across'),
),
for (final word in acrossWords)
_WordSelectMenuItem(
location: acrossWord!.location,
word: word,
selectedCharacter: selectedCharacter,
direction: Direction.across,
),
if (acrossWords.isNotEmpty && downWords.isNotEmpty)
Padding(
padding: const EdgeInsets.all(4),
child: Text('Down'),
),
for (final word in downWords)
_WordSelectMenuItem(
location: downWord!.location,
word: word,
selectedCharacter: selectedCharacter,
direction: Direction.down,
),
],
);
}
return ColoredBox(
color: Theme.of(context).colorScheme.primaryContainer,
);
},
),
);
}
TableSpan _buildSpan(BuildContext context, int index) {
return TableSpan(
extent: FixedTableSpanExtent(32),
foregroundDecoration: TableSpanDecoration(
border: TableSpanBorder(
leading: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
trailing: BorderSide(
color: Theme.of(context).colorScheme.onPrimaryContainer,
),
),
),
);
}
}
class _WordSelectMenuItem extends ConsumerWidget {
const _WordSelectMenuItem({
required this.location,
required this.word,
required this.selectedCharacter,
required this.direction,
});
final Location location;
final String word;
final CrosswordCharacter? selectedCharacter;
final Direction direction;
@override
Widget build(BuildContext context, WidgetRef ref) {
final notifier = ref.read(puzzleProvider.notifier);
return MenuItemButton(
onPressed:
ref.watch(
puzzleProvider.select(
(puzzle) => puzzle.canSelectWord(
location: location,
word: word,
direction: direction,
),
),
)
? () => notifier.selectWord(
location: location,
word: word,
direction: direction,
)
: null,
leadingIcon:
switch (direction) {
Direction.across => selectedCharacter?.acrossWord?.word == word,
Direction.down => selectedCharacter?.downWord?.word == word,
}
? Icon(Icons.radio_button_checked_outlined)
: Icon(Icons.radio_button_unchecked_outlined),
child: Text(word),
);
}
}
This widget is a bit more intense than the last one, even though it has been constructed from pieces you have seen used in other places in the past. Now, each populated cell produces a context menu when clicked, which lists the words a user can select. If words have been selected, then words that conflict aren't selectable. To deselect a word, the user taps on the menu item for that word.
Assuming the player can select words to fill the entire crossword, you need a "You've won!" screen.
- Create a
puzzle_completed_widget.dartfile and then add the following content to it:
lib/widgets/puzzle_completed_widget.dart
import 'package:flutter/material.dart';
class PuzzleCompletedWidget extends StatelessWidget {
const PuzzleCompletedWidget({super.key});
@override
Widget build(BuildContext context) {
return Center(
child: Text(
'Puzzle Completed!',
style: TextStyle(fontSize: 36, fontWeight: FontWeight.bold),
),
);
}
}
I'm sure you can take this and make it more interesting. To learn more about animation tools, see the Building next generation UIs in Flutter codelab.
- Edit your
lib/main.dartfile as follows:
lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'widgets/crossword_puzzle_app.dart'; // Update this line
void main() {
runApp(
ProviderScope(
child: MaterialApp(
title: 'Crossword Puzzle', // Update this line
debugShowCheckedModeBanner: false,
theme: ThemeData(
colorSchemeSeed: Colors.blueGrey,
brightness: Brightness.light,
),
home: CrosswordPuzzleApp(), // Update this line
),
),
);
}
When you run this app, you will see the animation as the crossword generator generates your puzzle. Then you will be presented with a blank puzzle to solve. Assuming you solve it, you should be presented with a screen that looks like this:
১০. অভিনন্দন
Congratulations! You succeeded in building a puzzle game with Flutter!
You built a crossword generator that became a puzzle game. You mastered running background computations in a pool of isolates. You used immutable data structures to ease the implementation of a backtracking algorithm. And you spent quality time with TableView , which will come in handy the next time you need to display tabular data.