Skip to content

Commit dd35d9a

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/883065
FLUT-883065- [Others] How to highlight the cell value when searching in Flutter DataTable (SfDataGrid)?
2 parents 1419a9d + 50b791f commit dd35d9a

File tree

124 files changed

+4775
-2
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

124 files changed

+4775
-2
lines changed

‎.gitignore‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Miscellaneous
2+
*.class
3+
*.log
4+
*.pyc
5+
*.swp
6+
.DS_Store
7+
.atom/
8+
.buildlog/
9+
.history
10+
.svn/
11+
migrate_working_dir/
12+
13+
# IntelliJ related
14+
*.iml
15+
*.ipr
16+
*.iws
17+
.idea/
18+
19+
# The .vscode folder contains launch configuration and tasks you configure in
20+
# VS Code which you may wish to be included in version control, so this line
21+
# is commented out by default.
22+
#.vscode/
23+
24+
# Flutter/Dart/Pub related
25+
**/doc/api/
26+
**/ios/Flutter/.last_build_id
27+
.dart_tool/
28+
.flutter-plugins
29+
.flutter-plugins-dependencies
30+
.pub-cache/
31+
.pub/
32+
/build/
33+
34+
# Symbolication related
35+
app.*.symbols
36+
37+
# Obfuscation related
38+
app.*.map.json
39+
40+
# Android Studio will place build artifacts here
41+
/android/app/debug
42+
/android/app/profile
43+
/android/app/release

‎README.md‎

Lines changed: 65 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,65 @@
1-
# How-to-highlight-the-cell-value-when-searching-in-Flutter-DataTable-SfDataGrid-
2-
How to highlight the cell value when searching in Flutter DataTable (SfDataGrid)?
1+
# How to highlight the cell value when searching in Flutter DataTable (SfDataGrid)?
2+
3+
In this article, we will show you how to highlight the cell value when searching in [Flutter DataTable](https://www.syncfusion.com/flutter-widgets/flutter-datagrid).
4+
5+
Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the necessary properties. Within the [DataGridSource.buildRow()](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html), if [searchController.text](https://api.flutter.dev/flutter/widgets/TextEditingController/text.html) is equal to the corresponding cell value, you should add the appropriate style to highlight the text in the cell. Additionally, remember to call [notifyListeners](https://api.flutter.dev/flutter/foundation/ChangeNotifier/notifyListeners.html) when the searchController.text changes, to refresh the DataGrid and apply highlighting to the searched cell value.
6+
7+
```dart
8+
Widget searchField() {
9+
return Container(
10+
width: 200,
11+
height: 50,
12+
decoration: BoxDecoration(
13+
border: Border.all(
14+
color: Colors.grey,
15+
width: 1.0,
16+
),
17+
borderRadius: BorderRadius.circular(8.0),
18+
),
19+
child: TextField(
20+
controller: employeeDataSource.searchController,
21+
onChanged: (v) {
22+
employeeDataSource.refreshDataGridSource();
23+
initiateScrolling();
24+
},
25+
decoration: const InputDecoration(
26+
hintText: "Search",
27+
),
28+
),
29+
);
30+
}
31+
32+
33+
class EmployeeDataSource extends DataGridSource {
34+
…
35+
36+
@override
37+
DataGridRowAdapter buildRow(DataGridRow row) {
38+
return DataGridRowAdapter(
39+
cells: row.getCells().map<Widget>((e) {
40+
TextStyle? getTextStyle() {
41+
if (searchController.text.toLowerCase() ==
42+
e.value.toString().toLowerCase()) {
43+
return TextStyle(
44+
fontWeight: FontWeight.bold,
45+
color: Colors.pinkAccent,
46+
background: Paint()..color = Colors.yellow);
47+
} else {
48+
return null;
49+
}
50+
}
51+
52+
return Container(
53+
alignment: Alignment.center,
54+
padding: const EdgeInsets.all(8.0),
55+
child: Text(
56+
e.value.toString(),
57+
style: getTextStyle(),
58+
),
59+
);
60+
}).toList(),
61+
);
62+
}
63+
```
64+
65+
You can download the example from [GitHub](https://github.com/SyncfusionExamples/How-to-highlight-the-cell-value-when-searching-in-Flutter-DataTable-SfDataGrid).

‎android/.gitignore‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
gradle-wrapper.jar
2+
/.gradle
3+
/captures/
4+
/gradlew
5+
/gradlew.bat
6+
/local.properties
7+
GeneratedPluginRegistrant.java
8+
9+
# Remember to never publicly share your keystore.
10+
# See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app
11+
key.properties
12+
**/*.keystore
13+
**/*.jks

‎android/app/build.gradle‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
plugins {
2+
id "com.android.application"
3+
id "kotlin-android"
4+
id "dev.flutter.flutter-gradle-plugin"
5+
}
6+
7+
def localProperties = new Properties()
8+
def localPropertiesFile = rootProject.file('local.properties')
9+
if (localPropertiesFile.exists()) {
10+
localPropertiesFile.withReader('UTF-8') { reader ->
11+
localProperties.load(reader)
12+
}
13+
}
14+
15+
def flutterVersionCode = localProperties.getProperty('flutter.versionCode')
16+
if (flutterVersionCode == null) {
17+
flutterVersionCode = '1'
18+
}
19+
20+
def flutterVersionName = localProperties.getProperty('flutter.versionName')
21+
if (flutterVersionName == null) {
22+
flutterVersionName = '1.0'
23+
}
24+
25+
android {
26+
namespace "com.example.highlight_value"
27+
compileSdk flutter.compileSdkVersion
28+
ndkVersion flutter.ndkVersion
29+
30+
compileOptions {
31+
sourceCompatibility JavaVersion.VERSION_1_8
32+
targetCompatibility JavaVersion.VERSION_1_8
33+
}
34+
35+
kotlinOptions {
36+
jvmTarget = '1.8'
37+
}
38+
39+
sourceSets {
40+
main.java.srcDirs += 'src/main/kotlin'
41+
}
42+
43+
defaultConfig {
44+
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
45+
applicationId "com.example.highlight_value"
46+
// You can update the following values to match your application needs.
47+
// For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-gradle-build-configuration.
48+
minSdkVersion flutter.minSdkVersion
49+
targetSdkVersion flutter.targetSdkVersion
50+
versionCode flutterVersionCode.toInteger()
51+
versionName flutterVersionName
52+
}
53+
54+
buildTypes {
55+
release {
56+
// TODO: Add your own signing config for the release build.
57+
// Signing with the debug keys for now, so `flutter run --release` works.
58+
signingConfig signingConfigs.debug
59+
}
60+
}
61+
}
62+
63+
flutter {
64+
source '../..'
65+
}
66+
67+
dependencies {}

‎android/app/src/debug/AndroidManifest.xml‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<!-- The INTERNET permission is required for development. Specifically,
3+
the Flutter tool needs it to communicate with the running application
4+
to allow setting breakpoints, to provide hot reload, etc.
5+
-->
6+
<uses-permission android:name="android.permission.INTERNET"/>
7+
</manifest>

‎android/app/src/main/AndroidManifest.xml‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android">
2+
<application
3+
android:label="highlight_value"
4+
android:name="${applicationName}"
5+
android:icon="@mipmap/ic_launcher">
6+
<activity
7+
android:name=".MainActivity"
8+
android:exported="true"
9+
android:launchMode="singleTop"
10+
android:theme="@style/LaunchTheme"
11+
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|smallestScreenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
12+
android:hardwareAccelerated="true"
13+
android:windowSoftInputMode="adjustResize">
14+
<!-- Specifies an Android theme to apply to this Activity as soon as
15+
the Android process has started. This theme is visible to the user
16+
while the Flutter UI initializes. After that, this theme continues
17+
to determine the Window background behind the Flutter UI. -->
18+
<meta-data
19+
android:name="io.flutter.embedding.android.NormalTheme"
20+
android:resource="@style/NormalTheme"
21+
/>
22+
<intent-filter>
23+
<action android:name="android.intent.action.MAIN"/>
24+
<category android:name="android.intent.category.LAUNCHER"/>
25+
</intent-filter>
26+
</activity>
27+
<!-- Don't delete the meta-data below.
28+
This is used by the Flutter tool to generate GeneratedPluginRegistrant.java -->
29+
<meta-data
30+
android:name="flutterEmbedding"
31+
android:value="2" />
32+
</application>
33+
<!-- Required to query activities that can process text, see:
34+
https://developer.android.com/training/package-visibility?hl=en and
35+
https://developer.android.com/reference/android/content/Intent#ACTION_PROCESS_TEXT.
36+
37+
In particular, this is used by the Flutter engine in io.flutter.plugin.text.ProcessTextPlugin. -->
38+
<queries>
39+
<intent>
40+
<action android:name="android.intent.action.PROCESS_TEXT"/>
41+
<data android:mimeType="text/plain"/>
42+
</intent>
43+
</queries>
44+
</manifest>

‎android/app/src/main/kotlin/com/example/highlight_value/MainActivity.kt‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
package com.example.highlight_value
2+
3+
import io.flutter.embedding.android.FlutterActivity
4+
5+
class MainActivity: FlutterActivity()

‎android/app/src/main/res/drawable-v21/launch_background.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!-- Modify this file to customize your launch splash screen -->
3+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4+
<item android:drawable="?android:colorBackground" />
5+
6+
<!-- You can insert your own image assets here -->
7+
<!-- <item>
8+
<bitmap
9+
android:gravity="center"
10+
android:src="@mipmap/launch_image" />
11+
</item> -->
12+
</layer-list>

‎android/app/src/main/res/drawable/launch_background.xml‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<!-- Modify this file to customize your launch splash screen -->
3+
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
4+
<item android:drawable="@android:color/white" />
5+
6+
<!-- You can insert your own image assets here -->
7+
<!-- <item>
8+
<bitmap
9+
android:gravity="center"
10+
android:src="@mipmap/launch_image" />
11+
</item> -->
12+
</layer-list>

‎android/app/src/main/res/mipmap-hdpi/ic_launcher.png‎

544 Bytes
Loading

0 commit comments

Comments
 (0)