DEV Community: Anton Wentzel

Importing and Displaying CSV data in flutter.

Anton Wentzel — Mon, 08 Apr 2024 08:39:07 +0000

Flutter offers developers a robust platform for building cross-platform mobile applications effortlessly. One common scenario in many applications is the need to import and display CSV (Comma-Separated Values) data. In this tutorial, we’ll delve into how to achieve this in a Flutter app using the file_picker plugin.

Getting Started

Before diving into the implementation, ensure you have Flutter installed on your system. If not, follow the instructions on the Flutter website to get started.

Once Flutter is set up, create a new Flutter project or use an existing one. Then, add the necessary dependencies to your pubspec.yaml file:

dependencies: 
file_picker: ^5.3.3 
csv: ^5.0.2 
path_provider: ^2.1.0 
open_file: ^3.3.2

Run flutter pub get to install the dependencies.

Implementing File Upload And Display

Let’s start by setting up the main entry point of our Flutter app. Here’s the code for the main.dart file:

import 'package:flutter/material.dart'; 
import 'upload_page.dart'; // Importing the UploadPage widget 

void main() { runApp(const MyApp()); } 

class MyApp extends StatelessWidget { 

const MyApp({Key? key}) : super(key: key); 

@override Widget build(BuildContext context) { 

return MaterialApp( 
  title: 'CSV Data Import', 
  theme: ThemeData( 
  colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.deepPurple), 
  useMaterial3: true, ), 
  home: const UploadPage(),
    ); 
  }
 }

In this code, we’ve set up a basic Flutter app with a MyApp widget as the root widget. It sets the title and theme for the app and sets the UploadPage as the initial route.

Next, let’s look at the implementation of the UploadPage widget, where users can upload a CSV file and display its data:

// upload_page.dart 
import 'dart:convert'; 
import 'dart:io'; 
import 'package:file_picker/file_picker.dart'; 
import 'package:flutter/material.dart'; 
import 'package:csv/csv.dart'; 

class UploadPage extends StatefulWidget { 
const UploadPage({Key? key}) : super(key: key); 

@override State<UploadPage> createState() => _UploadPageState(); } 

class _UploadPageState extends State<UploadPage> { 

List<List<dynamic>> _data = []; 
String? filePath;

 @override Widget build(BuildContext context) { 

return Scaffold(
         appBar: AppBar( 
         title: const Text("CSV Data Import"),
       ),
       body: Column( 
               children: [ 
                 ElevatedButton( 
                   child: const Text("Upload File"), 
                   onPressed: () { _pickFile(); },
           ),
             Expanded( 
               child: ListView.builder( 
                        itemCount: _data.length, 
                        itemBuilder: (_, index) { 
                          return ListTile( 
                                   title: Text(_data[index].join(', ')),
                                 );
                         },
             ),
        ),
      ],
   ),
  );
 } 

void _pickFile() async { 
  final result = await FilePicker.platform.pickFiles(allowMultiple: false); 

  if (result == null) return; 

  filePath = result.files.single.path!; 
  final input = File(filePath!).openRead(); 
  final fields = await input .transform(utf8.decoder) .transform(const CsvToListConverter()) .toList(); 
  setState(() { _data = fields; }); 
  }
}

This code sets up the UploadPage widget, where users can upload a CSV file. Once a file is selected, its data is parsed and displayed in a list view.

Conclusion

In this tutorial, we explored how to import and display CSV data in a Flutter app using the file_picker plugin. This functionality can be invaluable for applications that require importing data from external sources, such as spreadsheets or databases. Feel free to customize the code to fit your specific requirements and enhance the functionality of your Flutter app.

GitHub: https://github.com/iDigiSolWeb/coding_samples/tree/main/csv_upload

TURN YOUR APP IDEAS INTO DIGITAL REALITY WITH IDIGISOLWEB

An Easy Way To Implement Offline Maps In Flutter

Anton Wentzel — Mon, 04 Mar 2024 09:04:36 +0000

Offline maps can be incredibly useful in Flutter applications, especially for users who may not always have access to reliable internet connections. Implementing offline maps can enhance user experience and ensure functionality even in areas with limited or no internet connectivity. In this guide, we’ll explore the easiest way to integrate offline maps into your Flutter application using the flutter_map and latlong2 packages.

Step 1: Install Dependencies Begin by adding the required dependencies to your pubspec.yaml file:

dependencies: 
flutter: 
sdk: 
flutter flutter_map: ^6.1.0 
latlong2: ^0.9.0

After updating your pubspec.yaml file, run flutter pub get to install the new dependencies.

Step 2: Implement Offline Map Screen Now, let’s create a Flutter screen to display the offline map. We’ll use the flutter_map package to render the map and the latlong2 package to handle geographical coordinates.

import 'package:flutter/material.dart'; 
import 'package:flutter_map/flutter_map.dart'; 
import 'package:latlong2/latlong.dart'; 


void main() { runApp(MyApp()); } 


class MyApp extends StatelessWidget { 
@override Widget build(BuildContext context) { 
  return MaterialApp( 
    title: 'Offline Maps', 
    theme: ThemeData( primarySwatch: Colors.blue, ),
    home: OfflineMapScreen(), 
    ); 
  } 
} 


class OfflineMapScreen extends StatelessWidget { 
@override Widget build(BuildContext context) { 
  return Scaffold( 
    appBar: AppBar( title: Text('Offline Map'), ), 
    body: FlutterMap( 
      options: MapOptions( 
      center: LatLng(51.509364, -0.128928), 
      zoom: 9.2, ), 
      layers: [ 
        TileLayerOptions( 
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', 
          userAgent: 'com.example.app', 
        ), 
      ], 
    ), 
   ); 
  } 
}

Step 3: Run Your Application You can now run your Flutter application to see the offline map in action. The map will initially display at the specified coordinates and zoom level, utilizing OpenStreetMap tiles for rendering.

Why Use Offline Maps in Flutter? Offline maps offer several benefits in Flutter applications. Firstly, they provide uninterrupted access to maps and location-based features, even in areas with poor or no internet connectivity. This is crucial for applications that rely on maps for navigation, tourism, or outdoor activities where internet access may be limited. Additionally, offline maps can improve performance and reduce data usage, enhancing the overall user experience. By integrating offline maps into your Flutter application, you can ensure reliable functionality and increased usability for your users, regardless of their internet connection status.

Full Code HERE

Turn Your App Ideas Into Digital Reality With IDigiSol Web. An App Developement And E-Commerce Consulting Company. Get In Touch Today!

Guide To Extracting Image Metadata In Flutter

Anton Wentzel — Thu, 22 Feb 2024 07:39:55 +0000

Images play a crucial role in many Flutter applications, from profile pictures to product images. However, sometimes you might need more than just the visual content of an image. You may need additional information embedded within the image, such as its metadata. In this guide, we’ll explore how to extract image metadata in a Flutter app and display it alongside the image.

What Is Image Metadata?
Image metadata, also known as Exif data, is additional information stored within an image file. This metadata can include details such as:

Image dimensions
File size
Creation date
Camera make and model
GPS coordinates
and much more

Implementing Image Metadata Extraction In Flutter:

Step 1: Adding Dependencies
We’ll use the image_picker and exif packages to handle image selection and metadata extraction, respectively. First, add the dependencies to your pubspec.yaml file:

dependencies: flutter: 

sdk: flutter 

image_picker: ^0.8.4+4 

exif: ^1.0.3

In the info.plist file – ios/runner/info.plist

<key>NSCameraUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>
<key>NSMicrophoneUsageDescription</key>
<string>Used to capture audio for image picker plugin</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Used to demonstrate image picker plugin</string>

Step 2: Designing The User Interface
We’ll create a simple user interface with an image display area, a button to choose an image, and a section to display metadata. Here’s the code for the UI:

import 'dart:io'; 
import 'package:flutter/material.dart'; 
import 'package:image/image.dart' as img; 
import 'package:exif/exif.dart'; 
import 'package:image_picker/image_picker.dart'; 


void main() { 
runApp(MaterialApp( home: ImageMetadataScreen(), ));
 } 

class ImageMetadataScreen extends StatefulWidget { 

@override _ImageMetadataScreenState createState() => _ImageMetadataScreenState(); } 

class _ImageMetadataScreenState extends State<ImageMetadataScreen> { 

File? _image; Map<String, dynamic>? _metadata; 


Future<void> _getImage() async {
 final picker = ImagePicker(); 
 final pickedImage = await picker.pickImage(source: ImageSource.gallery); 

 if (pickedImage != null) { 
     setState(() { 
       _image = File(pickedImage.path); 
       _metadata = null; // Reset metadata when a new image is selected 
     });
   _extractMetadata(); 
   }
} 

Future<void> _extractMetadata() async { 
try { 
  final bytes = await _image!.readAsBytes(); 
  final image = img.decodeImage(bytes); 
  if (image != null) { 
    final exifData = await readExifFromBytes(bytes);
    setState(() { _metadata = exifData; }); } 
  }catch (e) { 
  print('Error extracting metadata: $e'); 
 }
} 


Widget _buildMetadataList() { 
  if (_metadata == null) { 
    return Container(); // Return an empty container if no metadata available } 
  List<Widget> metadataWidgets = []; 
  _metadata!.forEach((key, value) { 
    metadataWidgets.add( 
    ListTile( 
      title: Text(key), 
      subtitle: Text(value.toString()),
      ),
    );
  }); 
  return Column( 
    crossAxisAlignment: CrossAxisAlignment.start, 
    children: metadataWidgets, 
    ); 
} 


@override Widget build(BuildContext context) { 
  return Scaffold( 
    appBar: AppBar( 
    title: Text('Image Metadata'), ), 
    body: Column( 
      crossAxisAlignment: CrossAxisAlignment.stretch, 
      children: [ 
        _image != null ? Expanded( 
          child: Image.file( _image!, fit: BoxFit.cover, ), ) 
        : Placeholder(), // Placeholder if no image is selected ElevatedButton(
        onPressed: _getImage, 
        child: Text('Choose Image'), 
       ), 
    Expanded( 
      child: SingleChildScrollView( 
        child: Padding( 
          padding: const EdgeInsets.all(16.0), 
          child: _buildMetadataList(), 
          ), 
        ), 
      ), 
    ], 
   ), 
  ); 
 } 
}

Step 3: Running The Application
Now, you can run your Flutter application on an emulator or a physical device. When you tap the “Choose Image” button, you’ll be prompted to select an image from your device’s gallery. Once selected, the image will be displayed, along with its metadata below.

Conclusion:
In this guide, we’ve learned how to extract image metadata in a Flutter application using the image_picker and exif packages. By following the steps outlined above, you can easily incorporate image metadata extraction into your Flutter projects. This functionality can be particularly useful in applications where additional information about images is required beyond their visual content.

View the full code here

TURN YOUR APP IDEA INTO DIGITAL REALITY WITH iDIGISOL WEB, TODAY!

Building A Secure Biometric Login App With Flutter

Anton Wentzel — Tue, 20 Feb 2024 10:04:50 +0000

In today’s digital age, security is of utmost importance, especially when it comes to sensitive data and personal information. Biometric authentication has become increasingly popular for its convenience and enhanced security. In this tutorial, we’ll walk through building a Flutter app with biometric login functionality using the local_auth package.

Step 1: Setting Up Your Flutter Project
First, ensure you have Flutter installed on your machine..

Create a new Flutter project using the following command:

flutter create biometric_login_app
Navigate to your project directory:

cd biometric_login_app
Add the local_auth package to your pubspec.yaml file:

dependencies: 

flutter: sdk: 
flutter local_auth: ^1.1.8

Run flutter pub get to install the dependencies.

Setup:

IOS Integration
Note that this plugin works with both Touch ID and Face ID. However, to use the latter, you need to also add:

<key>NSFaceIDUsageDescription</key>
<string>Why is my app authenticating using face id?</string>

to your Info.plist file. Failure to do so results in a dialog that tells the user your app has not been updated to use Face ID.

Android Integration

The plugin will build and run on SDK 16+, but isDeviceSupported() will always return false before SDK 23 (Android 6.0).

In Your Adndroid/App/Build.Gradle

min sdk : 23

Activity Changes
Note that local_auth requires the use of a FragmentActivity instead of an Activity. To update your application:

If you are using FlutterActivity directly, change it to FlutterFragmentActivity in your AndroidManifest.xml.

If you are using a custom activity, update your

MainActivity.java:

import io.flutter.embedding.android.FlutterFragmentActivity; 

public class MainActivity extends FlutterFragmentActivity { // ... }

or MainActivity.kt:

import io.flutter.embedding.android.FlutterFragmentActivity 

class MainActivity: FlutterFragmentActivity() { // ... }

to inherit from FlutterFragmentActivity.

Permissions
Update your project’s AndroidManifest.xml file to include the USE_BIOMETRIC permissions:

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="com.example.app">
  <uses-permission android:name="android.permission.USE_BIOMETRIC"/>
<manifest>

On IOS SIMULATOR:

1.Go to Features and make sure Face ID is enrolled.

Open IOS settings -> Accessability -> FaceID and Attention and make sure its enabled.

Step 2: Implementing Biometric Authentication
Now, let’s integrate biometric authentication into our app. We’ll start by adding the necessary imports and initializing the LocalAuthentication instance.

import 'package:flutter/material.dart'; 
import 'package:local_auth/local_auth.dart'; 


final LocalAuthentication _localAuthentication = LocalAuthentication(); 
String _biometricType = ''; 

Future<void> _checkBiometrics() async { 
  bool canCheckBiometrics = await _localAuthentication.canCheckBiometrics; 

  if (canCheckBiometrics) { 
     List<BiometricType> availableBiometrics = await _localAuthentication.getAvailableBiometrics(); 

  if (availableBiometrics.contains(BiometricType.face)) { _
     biometricType = 'Face ID'; } 
  else if (availableBiometrics.contains(BiometricType.fingerprint)) { 
    _biometricType = 'Fingerprint'; } 


  if (mounted) {
   _authenticate(); 
  } ,
 },
}

Step 3: Implementing Biometric Authentication Logic
Next, let’s define the _authenticate method to handle the biometric authentication process.

Future<void> _authenticate() async { 

  bool authenticated = false; 

  try { authenticated = await _localAuthentication.authenticate( 
    localizedReason: 'Authenticate to access the app', 
    useErrorDialogs: true, stickyAuth: true, );  

  } catch (e) { 
  print('Error: $e'); 
}

if (authenticated) {
   // Biometric authentication successful, navigate to the main screen 
   Navigator.pushReplacement( context, MaterialPageRoute(builder: (context) => MainScreen()),
 ); 
 }

}

Step 4: UI Implementation
Now, let’s create a simple UI to trigger the biometric authentication process.

class BiometricLoginPage extends StatelessWidget { 
@override Widget build(BuildContext context) { 

return Scaffold( 
appBar: AppBar( title: Text('Biometric Login'), 
), 

body: Center( 
child: RaisedButton(
       onPressed: () { 
         _checkBiometrics(); 
       }, 
       child: Text('Authenticate with $_biometricType'), 
       ), 
     ), 
   ); 

  } }

Step 5: Testing
You can now run your Flutter app on a physical device or emulator to test the biometric login functionality.

flutter run

Conclusion
Congratulations! You’ve successfully implemented biometric authentication in your Flutter app. Biometric login not only enhances security but also provides a seamless user experience. Feel free to customize the UI and add additional features to suit your app’s requirements.

That’s it for this tutorial. Happy coding!

You can view the full code on our github repository here.

[TURN YOUR APP IDEA INTO DIGITAL REALITY WITH iDIGISOL WEB

](https://www.idigisolweb.com)

How To Incorporate An RSS Feed Into Your Flutter App

Anton Wentzel — Tue, 20 Feb 2024 09:59:36 +0000

Incorporating an RSS feed into your Flutter app can provide your users with the latest content from their favorite sources, keeping them engaged and informed. In this guide, we’ll walk through the process of integrating an RSS feed into your Flutter app using the xml2json and http packages.

Step 1: Set Up Your Flutter Project
If you haven’t already, create a new Flutter project or open an existing one where you want to integrate the RSS feed.

Step 2: Add Dependencies To Your Pubspec.Yaml
In your pubspec.yaml file, add the following dependencies.

dependencies: 

xml2json: ^6.2.0 
http: ^1.1.0

These packages will allow you to parse the XML data from the RSS feed and make HTTP requests to fetch the feed content.

Step 3: Import Necessary Packages And Set Up Your App

import 'dart:convert'; 
import 'package:flutter/material.dart';
import 'package:xml2json/xml2json.dart'; 
import 'package:http/http.dart' as http; 

void main() { 
  runApp(const MyApp()); 
} 

class MyApp extends StatelessWidget { 
  const MyApp({Key? key}) : super(key: key); 

@override Widget build(BuildContext context) { 
return MaterialApp( 
  title: 'Flutter Demo', 
  theme: ThemeData( 
         colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple), 
         useMaterial3: true, ), 
  home: const MyHomePage(title: 'Top Rugby Stories'),
  ); 
 } 
}

Step 4: Create A Method To Fetch And Parse The RSS Feed

class MyHomePage extends StatefulWidget { 
const MyHomePage({Key? key, required this.title}) : super(key: key); 
final String title; 
@override State<MyHomePage> createState() => _MyHomePageState(); 
} 
class _MyHomePageState extends State<MyHomePage> { 
final Xml2Json xml2json = Xml2Json(); 
List topStories = []; 

  // Method to fetch and parse the RSS feed 
  Future<void> getArticles() async { 

    final url = Uri.parse('https://www.rugbypass.com/feeds/rss/');final response = await http.get(url); 

    // Parse the XML response 
    xml2json.parse(response.body); 

    // Convert XML to JSON format 
    var jsondata = await xml2json.toGData(); 
    var data = json.decode(jsondata); 

    // Extract top stories from the JSON data 
    setState(() { 
      topStories = data['rss']['channel']['item']; 
    });

    // Print top stories to console (for debugging) 
    print(topStories);
 }

@override Widget build(BuildContext context) {
   return Scaffold( 
     appBar: AppBar( 
     backgroundColor: Theme.of(context).colorScheme.inversePrimary, 
     title: Text(widget.title), 
     ), 
     body: FutureBuilder( 
       future: getArticles(), 
       builder: (BuildContext context, AsyncSnapshot snapshot) {
          return ListView.builder( 
            itemCount: topStories.length, 
            itemBuilder: (context, index) { 
              return Padding( 
                padding: const EdgeInsets.all(8.0), 
                  child: Card( 
                    child: Padding( 
                      padding: const EdgeInsets.all(8.0), 
                        child: Row( 
                          children: [ 
                            Padding( padding: const EdgeInsets.all(8.0), 
                              child: Image.network( topStories[index]['enclosure']['url'], height: 50, ),                            ), 
                            SizedBox( width: 280, 
                              child: Text( topStories[index]['title']['\$t'], maxLines: 2, overflow: TextOverflow.ellipsis, softWrap: true, ),
                               ) ], 
                     ), 
                   ),
                 ),
               );
             },
           );
         },
       ),
     );
  } 
}

Step 5: Display The Feed Content In Your UI
In the build() method of your widget, use a FutureBuilder to asynchronously fetch the RSS feed content. Then, display the fetched content in your UI using a ListView.builder.

Step 6: Customize The UI As Needed
Customize the UI according to your app’s design and requirements. You can display the feed items in a list with images, titles, and any additional information you want to include.

Step 7: Test Your App
Test your app on different devices and screen sizes to ensure that the RSS feed integration works as expected and the UI displays correctly.

Conclusion
Incorporating an RSS feed into your Flutter app can enhance user engagement by providing them with up-to-date content from their favorite sources. The getArticles() function fetches the RSS feed content, parses it, and extracts the top stories, which are then displayed in the app’s UI. By following the steps outlined in this guide and utilizing the xml2json and http packages, you can easily integrate an RSS feed into your Flutter app and keep your users informed and engaged.

View the full code: GitHub Repository

iDigiSol Web provides app developement and e-commerc consulting services, Visit us at www.idigisolweb.com and turn your app idea into digital reality.

Basic Hive Setup In A Flutter App

Anton Wentzel — Tue, 20 Feb 2024 09:43:08 +0000

Basic Hive Setup In A Flutter App

Implementing Hive In A Flutter To-Do List App
In this tutorial, we’ll explore how to create a Basic Hive setup in a Flutter App, a lightweight and fast NoSQL database, into a Flutter to-do list application. Hive is a great choice for local data persistence in Flutter due to its simplicity and performance.

Prerequisites
To follow along with this tutorial, you should have a basic understanding of Flutter and how to set up a new Flutter project. You also need to have the Flutter SDK and an editor like Visual Studio Code or Android Studio installed on your machine.

Getting Started
Let’s start by creating a new Flutter project. Open your terminal or command prompt and run the following command:

`
flutter create hive_todo_app

`
`
This command will create a new Flutter project called hive_todo_app.

Next, navigate to the project directory:

cd hive_todo_app

Adding Dependencies

Open the pubspec.yaml file in your project and add the following dependencies under the dependencies section:

https://pub.dev/packages/hive

https://pub.dev/packages/hive_flutter

dependencies:  
flutter:    
sdk: flutter  
hive: ^2.0.4 
hive_flutter: ^1.0.0
The hive package is the core package for Hive, while hive_flutter provides additional functionality specifically for Flutter.

Save the file and run the following command to fetch the dependencies:

flutter pub get

Initializing Hive

Now that we have added the necessary dependencies, we can initialize Hive in our app.

Create a new file called main.dart in the lib folder of your project. Replace the contents of this file with the following code:

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

void main() async {  
  await Hive.initFlutter();  
  await Hive.openBox('todoBox');  
  runApp(MyApp());
}

class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {    
   return MaterialApp(
      title: 'Todo App',      
      theme: ThemeData(        
               primarySwatch: Colors.blue,        
               visualDensity: VisualDensity.adaptivePlatformDensity,
             ),
      home: TodoListScreen(),    
  );  
 }
}

In the main function, we first call Hive.initFlutter() to initialize Hive with Flutter. Then, we open a Hive box called 'todoBox' using Hive.openBox('todoBox'). This box will be used to store our to-do items.

The MyApp widget is a simple MaterialApp that serves as the entry point of our app. We set the app’s title and theme and specify that the TodoListScreen should be the home screen.

Creating The To-Do List Screen
Let’s create the screen that will display the list of to-do items.

Create a new file called todo_list_screen.dart in the lib folder. Replace the contents of this file with the following code:

import 'package:flutter/material.dart';
import 'package:hive/hive.dart';
import 'package:hive_flutter/hive_flutter.dart';

class TodoListScreen extends StatefulWidget {  
@override  _TodoListScreenState createState() => _TodoListScreenState();}

class _TodoListScreenState extends State<TodoListScreen> {  
late Box<Todo> _todoBox;  

@override  
void initState() {   
 super.initState();   
 _todoBox = Hive.box('todoBox');  
}  

@override  
Widget build(BuildContext context) {    
return Scaffold(      
appBar: AppBar(title: Text('Todo List'),
),
body: ValueListenableBuilder<Box<Todo>>(
  valueListenable: _todoBox.listenable(),       
  builder: (context, box, _) {          
    return ListView.builder(            
      itemCount: box.length,            
      itemBuilder: (context, index) {
        final todo = box.getAt(index)!;              
        return ListTile( 
                 title: Text(todo.title),  
                 subtitle: Text(todo.description),    
          );        
    },       
   );      
  },    
  ),      
floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),   
  onPressed: () {   
    showDialog(          
      context: context,          
      builder: (context) { 
        String title = '';   
        String description = '';     
        return AlertDialog(   
          title: Text('Add Todo'),     
          content: Column(  
            mainAxisSize: MainAxisSize.min,  
            children: [      
              TextField( 
                onChanged: (value) { 
                  title = value; 
                },      
                decoration: InputDecoration( 
                  labelText: 'Title',
                ),        
              ),           
              TextField(      
                onChanged: (value) {  
                  description = value;  
                 },    
                decoration: InputDecoration(  
                  labelText: 'Description', 
                ),     
               ),    
              ],     
           ),    
            actions: [   
               FlatButton(  
                 child: Text('Cancel'),
                 onPressed: () {    
                    Navigator.of(context).pop(); 
                   }, 
                 ),   
               FlatButton(  
                  child: Text('Save'), 
                   onPressed: () { 
                     final todo = Todo( 
                       title: title, 
                       description: description, 
                     );    
                     _todoBox.add(todo); 
                     Navigator.of(context).pop();  
                  },     
             ),      
          ],       
       );       
     },      
    );     
   },    
  ),  
  );  
 }
}

The TodoListScreen class extends StatefulWidget and is responsible for displaying the list of to-do items and providing an interface for adding new items.

In the initState method, we initialize the _todoBox variable with the Hive.box('todoBox') box. This gives us access to our to-do items stored in Hive.

The build method returns a Scaffold widget that has an AppBar with the title “Todo List” and a body with a ValueListenableBuilder. The ValueListenableBuilder listens for changes in the todoBox and rebuilds the UI whenever a change occurs. Inside the builder function, we create a ListView.builder that displays the to-do items as a list of ListTile widgets.

The floatingActionButton is used to open a dialog when pressed. The dialog contains two TextField widgets for entering the title and description of a new to-do item. When the “Save” button is pressed, we create a new Todo object with the entered values, add it to the _todoBox, and close the dialog.

Creating The Todo Model
We need to define a Todo model class that represents a single to-do item. Create a new file called todo_model.dart in the lib folder. Replace the contents of this file with the following code:

import 'package:hive/hive.dart';
part 'todo_model.g.dart';

@HiveType(typeId: 0)
class Todo extends HiveObject {  
@HiveField(0)  
String title;  
@HiveField(1)  
String description;  

Todo({required this.title,required this.description,});}

In this class, we annotate our Todo class with a @HiveType annotation. This annotation tells Hive that this class should be used for storing and retrieving to-do items.

The @HiveField annotation is used for specifying the indices of fields in the Hive database. In our case, we have two fields: title and description.

To generate the necessary Hive code, run the following command in your terminal:

flutter packages pub run build_runner build
Running The App
Now that everything is set up, let’s run our app and see the results.

Connect your device or start an emulator, and run the following command in your terminal:

flutter run
This command will build and run the Flutter project on your connected device or emulator.

Once the app is launched, you should see a screen with the title “Todo List” and an empty list. Tap on the floating action button to add a new to-do item. Enter a title and description, then tap “Save”. Your new to-do item should appear in the list.

Congratulations! You have successfully implemented Hive in a Flutter to-do list app. Hive provides a simple and efficient way to persist data locally in your Flutter applications. Explore the Hive documentation to learn more about its powerful features and improve your app further.

Conclusion
In this tutorial, we learned how to integrate Hive into a Flutter to-do list application. We covered initializing Hive, creating a Hive box, rendering data using ValueListenableBuilder, and adding new data to the Hive box. With this knowledge, you can now implement Hive in your own apps to persist data locally and create powerful offline experiences for your users. Happy coding!

Github Repository here

DEV Community: Anton Wentzel

Importing and Displaying CSV data in flutter.

An Easy Way To Implement Offline Maps In Flutter

Guide To Extracting Image Metadata In Flutter

TURN YOUR APP IDEA INTO DIGITAL REALITY WITH iDIGISOL WEB, TODAY!

Building A Secure Biometric Login App With Flutter

[TURN YOUR APP IDEA INTO DIGITAL REALITY WITH iDIGISOL WEB

How To Incorporate An RSS Feed Into Your Flutter App

iDigiSol Web provides app developement and e-commerc consulting services, Visit us at www.idigisolweb.com and turn your app idea into digital reality.

Basic Hive Setup In A Flutter App

Turn your app idea into digital reality with iDigiSol Web