Skip to content

Commit 5e5aa2b

Browse files
Merge pull request #1 from SyncfusionExamples/900309
How to disable the outer border in the Flutter DataGrid
2 parents ae87519 + b767e4f commit 5e5aa2b

File tree

124 files changed

+4653
-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

+4653
-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: 37 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,37 @@
1-
# How-to-disable-the-outer-border-in-the-flutter-DataGrid
2-
How to disable the outer border in the flutter DataGrid
1+
# How to disable the outer border in the Flutter DataGrid (SfDataGrid)?.
2+
3+
In this article, we will show you how to disable the outer border in the [Flutter DataGrid](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 required properties. Use the [ClipRect](https://api.flutter.dev/flutter/widgets/ClipRect-class.html) widget along with a [custom clipper](https://api.flutter.dev/flutter/widgets/ClipRect/clipper.html) (CustomClipper) to remove the outer borders. To achieve this, create a custom clipper class by extending the CustomClipper class. In the [getClip](https://api.flutter.dev/flutter/rendering/CustomClipper/getClip.html) method, use Rect.fromLTWH to set the grid line stroke width for the left and top sides, and specify the appropriate size for the right and bottom sides based on the grid layout. After defining this custom clipper, wrap the SfDataGrid with the ClipRect widget to control the visibility of the borders as desired.
6+
7+
```dart
8+
@override
9+
Widget build(BuildContext context) {
10+
return Scaffold(
11+
appBar: AppBar(
12+
title: const Text('Flutter SfDataGrid'),
13+
),
14+
body: ClipRect(
15+
clipper: CustomLeftClipper(),
16+
child: SfDataGrid(
17+
columnWidthMode: ColumnWidthMode.fill,
18+
source: _employeeDataSource,
19+
gridLinesVisibility: GridLinesVisibility.vertical,
20+
headerGridLinesVisibility: GridLinesVisibility.vertical,
21+
columns: getColumns,
22+
),
23+
));
24+
}
25+
26+
class CustomLeftClipper extends CustomClipper<Rect> {
27+
@override
28+
Rect getClip(Size size) {
29+
return Rect.fromLTWH(2, 2, size.width - 4, size.height - 58);
30+
}
31+
32+
@override
33+
bool shouldReclip(CustomClipper<Rect> oldClipper) => false;
34+
}
35+
```
36+
37+
You can download this example on [GitHub](https://github.com/SyncfusionExamples/How-to-disable-the-outer-border-in-the-flutter-DataGrid).

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

0 commit comments

Comments
 (0)