Celo Composer now supports Flutter π. Quickly develop mobile apps on Celo
Introductionβ
Celo Composer β Flutter is a kit where you can find all the code needed to kickstart and build the production-ready mobile dApp. It includes state management, wallet connect, great UI, and some standard UI widgets.
In this article, we will go through the Flutter version of Celo Composer, where we will learn how to connect your mobile app with crypto wallets and how to interact with Celo blockchain using Flutter.
Motivationβ
Building a mobile app with Flutter is easy, but making a mobile dApp with Flutter is way too tricky, primarily because of a lack of tools. However, building a production-ready app has a stylesheet, state-management, UI components, and API calls which are common in all the apps. Our idea was to write all the code required to create a mobile dApp that includes connecting to the mobile wallet, making transactions, requesting data from the wallet, and much more inside a starter kit to avoid rewrites.
Prerequisitesβ
To successfully follow this starter kit, you will need basic knowledge and understanding of Blockchain technology, the Solidity programming language for smart contracts, and the Flutter framework.
Requirementsβ
- Flutter β used to create an Android/iOS dApp.
- Valora Account β to connect to the dApp and make transactions.
- Android Studio β required to build and run an android app in an emulator or a mobile phone.
- xcode β required to build and run an ios app in a simulator or a mobile phone.
- A code editor or IDE β VSCode is recommended for Flutter development.
Packagesβ
flutter_walletconnect β Flutter WalletConnect is an open-source protocol for connecting decentralized applications to mobile wallets with QR code scanning or deep linking.
Installationβ
Click on Use this template
this repo from your Github.
- Clone the newly created repo to your computer.
- Navigate to the
flutter-app
inside of the packages.
cd packages/flutter-app
- Run the following command to install all the dependencies required to run the app locally.
flutter pub get
To run the flutter app, run the following command from the flutter-app
directory. Ensure you have an emulator/simulator or a mobile phone connected to your computer.
flutter run
Get some testnet Celo tokens on Valoraβ
Get your address from the Valora app and go to the Celo faucet site.
Paste your Valora address and tap Get Started. After a few seconds, you will receive the Celo tokens in your Valora wallet.
Folder structureβ
βββ README.md
βββ analysis_options.yaml
βββ android
βββ assets
β βββ fonts
β β βββ Poppins
β βββ images
β βββ celo-logo.jpeg
β βββ celo-logo.png
βββ build
βββ ios
βββ lib
β βββ common
β β βββ primary_button.dart
β βββ controllers
β β βββ theme_controller.dart
β βββ generated_plugin_registrant.dart
β βββ main.dart
β βββ screens
β β βββ home_screen.dart
β βββ utils
β βββ constants.dart
β βββ image_constants.dart
β βββ simple_logger.dart
β βββ theme_config.dart
βββ linux
βββ macos
βββ pubspec.lock
βββ pubspec.yaml
βββ test
βββ web
βββ windows
- The
lib
the directory contains all the flutter code. controller
the directory contains all the notifiers created forprovider
state management.models
have the data models used for managing and maintaining the data.screens
has all the UI code used in the app.utils
includes some helper functions and constants.ios
,android
,linux
,windows
,mac
andweb
contains platform-specific code.
Exploring the Mobile DAppβ
Once the app is opened, the user will see a Connect Wallet button. This can be used to connect to your desired wallet. Once you choose the wallet you will be redirected to the wallet app where you will be asked to allow the Celo Composer β Flutter app to access the public address. You can see the public address of the connected account in the app.
The dApp will automatically fetch the current balance of the account and update it in the app. To get the updated balance the user can click on the refresh button. Users can also send tokens to any address using the text fields available in the app.
Try entering the address and the amount you want to send and click ion SEND Transaction button to initiate the transaction. You will be redirected to the Valora wallet and asked to accept the transaction. Once the transaction is accepted, the balance of the user will automatically get updated.
Styleguideβ
Add image assetsβ
To add an image or assets, make a folder named /assets
in the app folder at the root location:
/flutter-app
/assets
/images
/lib
You can create assets for each screen like this -
/flutter-app
/assets
/images
/home
/profile
/onboarding
/lib
Now, add these assets to the pubspec.yaml
file:
assets:
- assets/images/
- assets/images/home/
- assets/images/profile/
- assets/images/onboarding/
Next, go to the main app and add the image constants in the file/src/config/image_constants.dart
:
class AllImages {
AllImages._();
static AllImages _instance = AllImages._();
factory AllImages() => _instance;
String image = 'assets/image/image_ex.png';
}
Set the image asset path in the Image widget as shown below:
Image.asset(
AllImages().image,
fit: BoxFit.contain,
),
Add fonts assetsβ
Make a folder inside /assets
in the main app and then make another subfolder in assets named fonts
:
/assets
/fonts
/Schyler-Regular.ttf
/Schyler-Italic.ttf
To register the fonts, open the `pubspec.yaml file and add the fonts info under the flutter section.
fonts:
- family: Schyler
fonts:
- asset: fonts/Schyler-Regular.ttf
- asset: fonts/Schyler-Italic.ttf
style: italic
Set the font using fontFamily
inside the Text widget as shown below:
Text(
'Hello world',
style: TextStyle(
fontFamily: 'Schyler',
),
)
Add theme dataβ
Go to lib/utils/theme_data.dart
. This will contain the code for configuring theme data:
To use the theme, goto app.dart and wrap the Material
app with Consumer
.
class App extends StatelessWidget {
Widget build(BuildContext context) {
return Consumer<AppStateNotifier>(builder: (context, appState, child) {
return MaterialApp(
title: 'Flutter starter kit!',
theme: ThemeConfig.lightTheme,
darkTheme: ThemeConfig.darkTheme,
themeMode: appState.isDarkMode ? ThemeMode.dark : ThemeMode.light,
onGenerateRoute: routes,
);
});
}
}
To change the theme from light to dark, use the code shown below:
Switch(
value: Provider.of<AppStateNotifier>(context).isDarkMode,
onChanged: (value) {
Provider.of<AppStateNotifier>(context,listen: false).updateTheme(value);
},
),
Add new dependenciesβ
To add dependencies, go to pub.dev for that specific dependency. Copy the install version and paste it into the pubspec.yaml file:
dependencies:
flutter:
sdk: flutter
# utils
package_info: ^0.4.0+13
shared_preferences: ^0.5.10
walletconnect_secure_storage: ^1.0.0
Conclusionβ
Congratulations on finishing the article! Thank you for taking the time to complete it. In this tutorial, you have learned how to create a Flutter dApp from scratch using web3dart
and walletconnect_dart
. Since Flutter is a multi-platform framework and the web3dart
and walletconnect
package supports all the platforms - Android, iOS, Linux, macOS, Web, and Windows you can use the same codebase to build multi-platform dApps very quickly. Soon Celo Composer β Flutter will have support for all the other platforms supported by Flutter.