Skip to content

Commit e9d77f6

Browse files
NeelakandanKannanNeelakandanKannan
authored
Merge pull request #1 from Tamilarasan-Paranthaman/master
 How-to-show-the-additional-cell-details-in-the-DataGridRow-without-showing-in-Flutter-DataGrid
2 parents 80fa6d5 + a4bf390 commit e9d77f6

File tree

122 files changed

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

122 files changed

+4485
-2
lines changed

‎.gitignore‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
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+
.packages
31+
.pub-cache/
32+
.pub/
33+
/build/
34+
35+
# Symbolication related
36+
app.*.symbols
37+
38+
# Obfuscation related
39+
app.*.map.json
40+
41+
# Android Studio will place build artifacts here
42+
/android/app/debug
43+
/android/app/profile
44+
/android/app/release

‎README.md‎

Lines changed: 174 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,174 @@
1-
# How-to-generate-the-additional-cell-details-in-the-DataGridRow-without-showing-in-Flutter-DataGrid
2-
This repository contains the example about How to generate the additional cell details in the DataGridRow without showing that in Flutter DataTable (SfDataGrid).
1+
# How-to-show-the-additional-cell-details-in-the-DataGridRow-without-showing-in-Flutter-DataGrid
2+
3+
In this article, you can learn about how to generate the additional cell details in the DataGridRow without showing that in [Flutter DataGrid](https://www.syncfusion.com/flutter-widgets/flutter-datagrid).
4+
5+
## STEP 1:
6+
Create a data source class by extending [DataGridSource](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource-class.html) and use it to map data to the SfDataGrid. In the `buildDataGridRow` method, map the entire underlying collection data to a DataGridRow.
7+
8+
Here all the columns are generated from the underlying collection to DataGridRow. But, the four columns are alone displayed in a grid.
9+
10+
In the [buildRow](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridSource/buildRow.html) method, return a [DataGridRowAdapter](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/DataGridRowAdapter-class.html) with the required cell details to be displayed in the DataGrid.
11+
12+
```dart
13+
class EmployeeDataSource extends DataGridSource {
14+
EmployeeDataSource(List<Employee> employees) {
15+
buildDataGridRow(employees);
16+
}
17+
18+
void buildDataGridRow(List<Employee> employeeData) {
19+
dataGridRow = employeeData.map<DataGridRow>((employee) {
20+
return DataGridRow(cells: [
21+
DataGridCell<int>(columnName: 'ID', value: employee.id),
22+
DataGridCell<String>(columnName: 'Name', value: employee.name),
23+
DataGridCell<String>(
24+
columnName: 'Designation', value: employee.designation),
25+
DataGridCell<int>(columnName: 'Salary', value: employee.salary),
26+
DataGridCell<String>(columnName: 'Address', value: employee.address),
27+
DataGridCell<String>(columnName: 'City', value: employee.city),
28+
DataGridCell<String>(columnName: 'Country', value: employee.country)
29+
]);
30+
}).toList();
31+
}
32+
33+
List<DataGridRow> dataGridRow = <DataGridRow>[];
34+
35+
@override
36+
List<DataGridRow> get rows => dataGridRow.isEmpty ? [] : dataGridRow;
37+
38+
@override
39+
DataGridRowAdapter? buildRow(DataGridRow row) {
40+
return DataGridRowAdapter(
41+
cells: [
42+
Container(
43+
alignment: Alignment.center,
44+
child: Text(
45+
row
46+
.getCells()
47+
.firstWhere((element) => element.columnName == 'ID')
48+
.value
49+
.toString(),
50+
)),
51+
Container(
52+
alignment: Alignment.center,
53+
child: Text(
54+
row
55+
.getCells()
56+
.firstWhere((element) => element.columnName == 'Name')
57+
.value
58+
.toString(),
59+
)),
60+
Container(
61+
alignment: Alignment.center,
62+
child: Text(
63+
row
64+
.getCells()
65+
.firstWhere((element) => element.columnName == 'Designation')
66+
.value
67+
.toString(),
68+
)),
69+
Container(
70+
alignment: Alignment.center,
71+
child: Text(
72+
row
73+
.getCells()
74+
.firstWhere((element) => element.columnName == 'Salary')
75+
.value
76+
.toString(),
77+
))
78+
].toList());
79+
}
80+
}
81+
82+
```
83+
## STEP 2:
84+
Initialize the [SfDataGrid](https://pub.dev/documentation/syncfusion_flutter_datagrid/latest/datagrid/SfDataGrid-class.html) widget with all the required properties. In this example, the additional cells not in the grid are displayed when tapping on the corresponding rows.
85+
86+
```dart
87+
@override
88+
void initState() {
89+
super.initState();
90+
employees = getEmployeeData();
91+
_employeeDataSource = EmployeeDataSource(employees);
92+
}
93+
94+
@override
95+
Widget build(BuildContext context) {
96+
return Scaffold(
97+
appBar: AppBar(title: const Text('Flutter SfDataGrid')),
98+
body: SfDataGrid(
99+
source: _employeeDataSource,
100+
columns: [
101+
GridColumn(
102+
columnName: 'ID',
103+
label: Container(
104+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
105+
alignment: Alignment.center,
106+
child: const Text('ID'),
107+
),
108+
),
109+
GridColumn(
110+
columnName: 'Name',
111+
label: Container(
112+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
113+
alignment: Alignment.center,
114+
child: const Text('Name'),
115+
),
116+
),
117+
GridColumn(
118+
columnName: 'Designation',
119+
label: Container(
120+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
121+
alignment: Alignment.center,
122+
child: const Text('Designation'),
123+
),
124+
),
125+
GridColumn(
126+
columnName: 'Salary',
127+
label: Container(
128+
padding: const EdgeInsets.symmetric(horizontal: 8.0),
129+
alignment: Alignment.center,
130+
child: const Text('Salary '),
131+
),
132+
),
133+
],
134+
onCellTap: (details) {
135+
if (details.rowColumnIndex.rowIndex != 0) {
136+
int selectedRowIndex = details.rowColumnIndex.rowIndex - 1;
137+
var row =
138+
_employeeDataSource.effectiveRows.elementAt(selectedRowIndex);
139+
140+
showDialog(
141+
context: context,
142+
builder: (context) => AlertDialog(
143+
shape: const RoundedRectangleBorder(
144+
borderRadius: BorderRadius.all(Radius.circular(32.0))),
145+
content: SizedBox(
146+
height: 200,
147+
width: 200,
148+
child: Column(
149+
mainAxisAlignment: MainAxisAlignment.spaceBetween,
150+
children: [
151+
Text(
152+
'Address: ${row.getCells().firstWhere((element) => element.columnName == 'Address').value.toString()}'),
153+
Text(
154+
'City: ${row.getCells().firstWhere((element) => element.columnName == 'City').value.toString()}'),
155+
Text(
156+
'Country: ${row.getCells().firstWhere((element) => element.columnName == 'Country').value.toString()}'),
157+
SizedBox(
158+
width: 300,
159+
child: ElevatedButton(
160+
onPressed: () {
161+
Navigator.pop(context);
162+
},
163+
child: const Text("OK")),
164+
)
165+
]),
166+
)));
167+
}
168+
},
169+
columnWidthMode: ColumnWidthMode.fill,
170+
),
171+
);
172+
}
173+
174+
```

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

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

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

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

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
2+
package="com.example.flutter_application">
3+
<application
4+
android:label="flutter_application"
5+
android:name="${applicationName}"
6+
android:icon="@mipmap/ic_launcher">
7+
<activity
8+
android:name=".MainActivity"
9+
android:exported="true"
10+
android:launchMode="singleTop"
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+
</manifest>

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

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

‎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)