Skip to content

Commit d656146

Browse files
FarjanaParveenFarjanaParveen
authored
Merge pull request #1 from SyncfusionExamples/KB
How to add multiple widgets in Flutter DataTable (SfDataGrid)
2 parents a28feac + c2b6a8f commit d656146

File tree

135 files changed

+4808
-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.

135 files changed

+4808
-2
lines changed

‎.gitignore

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

‎README.md

Lines changed: 92 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,92 @@
1-
# How-to-add-multiple-widgets-in-Flutter-DataTable
2-
This demo shows how to add multiple widgets in Flutter DataTable
1+
# How to add multiple widgets in Flutter DataTable (SfDataGrid)?.
2+
3+
In this article, we will show how to add multiple widgets 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 the necessary properties. To display multiple images or widgets in a cell, use the [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method within the [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html). This method allows you to customize the widget displayed in each cell. Inside buildRow, you can add conditional logic for each column or cell to load the appropriate widgets or images.
6+
7+
```dart
8+
@override
9+
DataGridRowAdapter buildRow(DataGridRow row) {
10+
return DataGridRowAdapter(
11+
cells:
12+
row.getCells().map<Widget>((cell) {
13+
switch (cell.columnName) {
14+
case 'id':
15+
return Container(
16+
padding: EdgeInsets.all(8.0),
17+
alignment: Alignment.center,
18+
child: Row(
19+
mainAxisAlignment: MainAxisAlignment.center,
20+
children: [
21+
Icon(Icons.badge, color: Colors.blue),
22+
SizedBox(width: 4),
23+
Text(cell.value.toString()),
24+
],
25+
),
26+
);
27+
28+
case 'name':
29+
return Container(
30+
padding: EdgeInsets.all(8.0),
31+
alignment: Alignment.center,
32+
child: Row(
33+
mainAxisAlignment: MainAxisAlignment.center,
34+
children: [
35+
CircleAvatar(
36+
radius: 12,
37+
backgroundImage: AssetImage(
38+
'images/GoldenState.png',
39+
),
40+
),
41+
SizedBox(width: 6),
42+
Text(cell.value.toString()),
43+
],
44+
),
45+
);
46+
47+
case 'designation':
48+
return Container(
49+
padding: EdgeInsets.all(4),
50+
alignment: Alignment.center,
51+
child: Row(
52+
mainAxisAlignment: MainAxisAlignment.center,
53+
children: [
54+
Image.asset(
55+
'images/DenverNuggets.png',
56+
width: 20,
57+
height: 20,
58+
),
59+
SizedBox(width: 4),
60+
Image.asset('images/Memphis.png', width: 20, height: 20),
61+
SizedBox(width: 4),
62+
Image.asset('images/Hornets.png', width: 20, height: 20),
63+
],
64+
),
65+
);
66+
67+
case 'salary':
68+
return Container(
69+
padding: EdgeInsets.all(8.0),
70+
alignment: Alignment.center,
71+
child: Row(
72+
mainAxisAlignment: MainAxisAlignment.center,
73+
children: [
74+
Icon(Icons.monetization_on, color: Colors.green),
75+
Text(cell.value.toString()),
76+
],
77+
),
78+
);
79+
80+
default:
81+
return Container(
82+
padding: EdgeInsets.all(8.0),
83+
alignment: Alignment.center,
84+
child: Text(cell.value.toString()),
85+
);
86+
}
87+
}).toList(),
88+
);
89+
}
90+
```
91+
92+
You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-add-multiple-widgets-in-Flutter-DataTable).

‎android/.gitignore

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

‎android/app/build.gradle.kts

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
plugins {
2+
id("com.android.application")
3+
id("kotlin-android")
4+
// The Flutter Gradle Plugin must be applied after the Android and Kotlin Gradle plugins.
5+
id("dev.flutter.flutter-gradle-plugin")
6+
}
7+
8+
android {
9+
namespace = "com.example.flutter_application"
10+
compileSdk = flutter.compileSdkVersion
11+
ndkVersion = flutter.ndkVersion
12+
13+
compileOptions {
14+
sourceCompatibility = JavaVersion.VERSION_11
15+
targetCompatibility = JavaVersion.VERSION_11
16+
}
17+
18+
kotlinOptions {
19+
jvmTarget = JavaVersion.VERSION_11.toString()
20+
}
21+
22+
defaultConfig {
23+
// TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html).
24+
applicationId = "com.example.flutter_application"
25+
// You can update the following values to match your application needs.
26+
// For more information, see: https://flutter.dev/to/review-gradle-config.
27+
minSdk = flutter.minSdkVersion
28+
targetSdk = flutter.targetSdkVersion
29+
versionCode = flutter.versionCode
30+
versionName = flutter.versionName
31+
}
32+
33+
buildTypes {
34+
release {
35+
// TODO: Add your own signing config for the release build.
36+
// Signing with the debug keys for now, so `flutter run --release` works.
37+
signingConfig = signingConfigs.getByName("debug")
38+
}
39+
}
40+
}
41+
42+
flutter {
43+
source = "../.."
44+
}

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

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
package com.example.flutter_application
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

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

442 Bytes
Loading

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

721 Bytes
Loading

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

1.01 KB
Loading

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

1.41 KB
Loading

‎android/app/src/main/res/values-night/styles.xml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is on -->
4+
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
5+
<!-- Show a splash screen on the activity. Automatically removed when
6+
the Flutter engine draws its first frame -->
7+
<item name="android:windowBackground">@drawable/launch_background</item>
8+
</style>
9+
<!-- Theme applied to the Android Window as soon as the process has started.
10+
This theme determines the color of the Android Window while your
11+
Flutter UI initializes, as well as behind your Flutter UI while its
12+
running.
13+
14+
This Theme is only used starting with V2 of Flutter's Android embedding. -->
15+
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
16+
<item name="android:windowBackground">?android:colorBackground</item>
17+
</style>
18+
</resources>

‎android/app/src/main/res/values/styles.xml

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<resources>
3+
<!-- Theme applied to the Android Window while the process is starting when the OS's Dark Mode setting is off -->
4+
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
5+
<!-- Show a splash screen on the activity. Automatically removed when
6+
the Flutter engine draws its first frame -->
7+
<item name="android:windowBackground">@drawable/launch_background</item>
8+
</style>
9+
<!-- Theme applied to the Android Window as soon as the process has started.
10+
This theme determines the color of the Android Window while your
11+
Flutter UI initializes, as well as behind your Flutter UI while its
12+
running.
13+
14+
This Theme is only used starting with V2 of Flutter's Android embedding. -->
15+
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
16+
<item name="android:windowBackground">?android:colorBackground</item>
17+
</style>
18+
</resources>

‎android/app/src/profile/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/build.gradle.kts

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
allprojects {
2+
repositories {
3+
google()
4+
mavenCentral()
5+
}
6+
}
7+
8+
val newBuildDir: Directory = rootProject.layout.buildDirectory.dir("../../build").get()
9+
rootProject.layout.buildDirectory.value(newBuildDir)
10+
11+
subprojects {
12+
val newSubprojectBuildDir: Directory = newBuildDir.dir(project.name)
13+
project.layout.buildDirectory.value(newSubprojectBuildDir)
14+
}
15+
subprojects {
16+
project.evaluationDependsOn(":app")
17+
}
18+
19+
tasks.register<Delete>("clean") {
20+
delete(rootProject.layout.buildDirectory)
21+
}

‎android/gradle.properties

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
org.gradle.jvmargs=-Xmx8G -XX:MaxMetaspaceSize=4G -XX:ReservedCodeCacheSize=512m -XX:+HeapDumpOnOutOfMemoryError
2+
android.useAndroidX=true
3+
android.enableJetifier=true

‎android/gradle/wrapper/gradle-wrapper.properties

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
distributionBase=GRADLE_USER_HOME
2+
distributionPath=wrapper/dists
3+
zipStoreBase=GRADLE_USER_HOME
4+
zipStorePath=wrapper/dists
5+
distributionUrl=https\://services.gradle.org/distributions/gradle-8.10.2-all.zip

‎android/settings.gradle.kts

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
pluginManagement {
2+
val flutterSdkPath = run {
3+
val properties = java.util.Properties()
4+
file("local.properties").inputStream().use { properties.load(it) }
5+
val flutterSdkPath = properties.getProperty("flutter.sdk")
6+
require(flutterSdkPath != null) { "flutter.sdk not set in local.properties" }
7+
flutterSdkPath
8+
}
9+
10+
includeBuild("$flutterSdkPath/packages/flutter_tools/gradle")
11+
12+
repositories {
13+
google()
14+
mavenCentral()
15+
gradlePluginPortal()
16+
}
17+
}
18+
19+
plugins {
20+
id("dev.flutter.flutter-plugin-loader") version "1.0.0"
21+
id("com.android.application") version "8.7.0" apply false
22+
id("org.jetbrains.kotlin.android") version "1.8.22" apply false
23+
}
24+
25+
include(":app")

‎images/Clippers.png

11.2 KB
Loading

‎images/DenverNuggets.png

11.5 KB
Loading

‎images/DetroitPistons.png

18 KB
Loading

‎images/GoldenState.png

17 KB
Loading

‎images/Hornets.png

14.4 KB
Loading

‎images/LosAngeles.png

11.3 KB
Loading

‎images/Memphis.png

12.3 KB
Loading

‎images/Miami.png

12.3 KB
Loading

‎images/NewYork.png

15.3 KB
Loading

‎images/Orlando.png

12.7 KB
Loading

0 commit comments

Comments
 (0)