Flutter Fix
No Result
View All Result
  • Login
  • Register
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
FORUM
ASK QUESTION
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods
No Result
View All Result
Flutter Fix
No Result
View All Result
Home Flutter Packages

How to Create a Dotted Line View with flutter

August 16, 2020
in Flutter Packages, Inputs, UI
6 min read
How to Create a Dotted Line View with flutter

You can use the FDotted Package from the Pub Dev website to create a Dotted Line in Flutter.

RELATED FLUTTER RESOURCES

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

A Beautiful Bottom navigation bar with bubble click effect in Flutter

A Simple Hacker News reader app built in Flutter

fdottedline

FDottedLine provides developers with the ability to create dashed lines. It also supports creating a dashed border for a Widget. Support for controlling the thickness, spacing, and corners of the dotted border.

ADVERTISEMENT

✨ Features

  • Supports dotted lines in both horizontal and vertical directions
  • Support to create dashed shapes
  • Provide super easy way to add dotted border to Widget
  • Support creating flexible dotted corner effects

⚙️ Parameter & Interface

🔩 FDottedLine param

PARAMTYPENECESSARYDEFAULTDESC
colorColorfalseColors.blackDotted line color
heightdoublefalsenullheight. If there is only [height] and no [width], you will get a dotted line in the vertical direction.If there are both [width] and [height], you will get a dotted border.
widthdoublefalsenullwidth. If there is only [width] and no [height], you will get a dotted line in the horizontal direction.If there are both [width] and [height], you will get a dotted border.
strokeWidthdoublefalse1.0The thickness of the dotted line
dottedLengthdoublefalse5.0The length of each small segment in the dotted line
spacedoublefalse3.0The distance between each segment in the dotted line
cornerFDottedLineCornerfalsenullThe corners of the dotted border. See [FDottedLineCorner] for details
childWidgetfalsenullIf [child] is set, [FDottedLine] will serve as the dotted border of [child].At this time, [width] and [height] will no longer be valid.

📺 Demo

🔩 Horizontal Demo

FDottedLine(
  color: color,
  width: 160.0,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

Dart

It is very simple to create a horizontal dotted line through FDottedLine.

The developer only needs to set the width parameter, but not the height parameter, which is all the developer needs to do for this.

If you want to control the thickness of the dotted line, set strokeWidth.

Through the dottedLength and space parameters, developers can freely control the length of each small segment in the dotted line and the distance between them.

⛓ Vertical Demo

FDottedLine(
  color: color,
  height: 160.0,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

Dart

If you want to create a dotted line in the vertical direction, it is also very simple.

Developers only need to assign a value to height and leave width to be null or 0.

🔹 Dotted Shape Demo

FDottedLine(
  color: Colors.lightBlue[600],
  height: 100.0,
  width: 50,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
)

Dart

FDottedLine can not only create simple dotted lines 🌝.

When developers assign values ​​to both width and height, they will be able to get a dotted rectangle! It’s incredible.

🌏 Corner Demo

FDottedLine(
  color: Colors.lightBlue[600],
  height: 70.0,
  width: 70.0,
  strokeWidth: 2.0,
  dottedLength: 10.0,
  space: 2.0,
  
  /// Set corner
  corner: FDottedLineCorner.all(50),
)

Dart

With FDottedLine, developers can even create corner effects of dashed rectangles. For example: dotted rounded rectangle, dotted round…

🧩 Child Demo

FDottedLine(
  color: color,
  strokeWidth: 2.0,
  dottedLength: 8.0,
  space: 3.0,
  corner: FDottedLineCorner.all(6.0),
  
  /// add widget
  child: Container(
    color: Colors.blue[100],
    width: 130,
    height: 70,
    alignment: Alignment.center,
    child: Text("0873"),
  ),
)

Dart

In the past, it was very difficult to add a dotted border to a Widget.

Because the official did not provide us with a good solution. But now, FDottedLine makes things easier than ever. Developers only need to use their Widget as a child of FDottedLine.

/// #1
FDottedLine(
  color: color,
  strokeWidth: 2.0,
  dottedLength: 8.0,
  space: 3.0,
  corner: FDottedLineCorner.all(75.0),
  child: Container(
    width: 130,
    height: 130,
    alignment: Alignment.center,
    /// #2
    child: FDottedLine(
      color: color,
      strokeWidth: 2.0,
      dottedLength: 8.0,
      space: 3.0,
      corner: FDottedLineCorner.all(20.0),
      child: Container(
        width: 43.0,
        height: 43.0,
        color: Colors.grey[900],
      ),
    ),
  ),
)

Dart

This also means that through the nesting of FDottedLine, many super interesting views can be created.

💡 More Demo

See what FDottedLine can do!

When there is such a simple way to create a dotted line, developers can freely build more wonderful views.

More about the application of FDottedLine , look forward to the exploration of developers 🔆.

GitHub

Use the easiest way to create a dotted line view 👀!
https://github.com/Fliggy-Mobile/fdottedline
13 forks.
110 stars.
0 open issues.
Recent commits:

  • fix#1.0.1#Correct the judgment condition added last, 纽特
  • other#1.0.0#update pubspec.yaml, 纽特
  • other#1.0.0#update readme, 纽特
  • feature#1.0.0#update fdottedlineother#1.0.0#update demoother#1.0.0#update pub infoother#1.0.0#update readme, 纽特
  • other#1.0.0#update pub infoother#1.0.0#update readme, 纽特

RelatedFlutter Resource

Navigation

Flutter Beautiful Sidebar/Navigation Bar that Collapses when clicked

September 15, 2020
A Beautiful Bottom navigation bar with bubble click effect in Flutter
Navigation

A Beautiful Bottom navigation bar with bubble click effect in Flutter

September 15, 2020
A Simple Hacker News reader app built in Flutter
Flutter Apps

A Simple Hacker News reader app built in Flutter

September 15, 2020
A Flutter package that detects credit card types from the first input
Card

A Flutter package that detects credit card types from the first input

September 7, 2020
A Verification Code Input Widget to get Value in Flutter.
Flutter Packages

A Verification Code Input Widget to get Value in Flutter.

September 7, 2020
How to select & Pick a Countries from a List in Flutter
Flutter Packages

How to select & Pick a Countries from a List in Flutter

September 2, 2020
Next Post
A Music Mp3 Streaming and Downloading App made with Flutter

A Music Mp3 Streaming and Downloading App made with Flutter

Flutter Yutube Downloading App

A Cool YouTube Media Downloader App made with Flutter

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended Stories

A Simple App to Manage Passwords – made with Flutter + Source Code

A Simple App to Manage Passwords – made with Flutter + Source Code

September 2, 2020
A Flutter App the Displays Current Time & Date for Different Cities

A Flutter App the Displays Current Time & Date for Different Cities

August 17, 2020
A Simple Analog Clock Built with Flutter (Painter)

A Simple Analog Clock Built with Flutter (Painter)

September 1, 2020

Popular Stories

  • FLUTTER-FUTUER-APP-DEVELOPMENT

    Why Google Flutter Is the Future of Mobile App Development

    0 shares
    Share 0 Tweet 0
  • Container Widget & Box Model in Flutter – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Flutter Future, Await, and Async – All You Need To Know

    0 shares
    Share 0 Tweet 0
  • Create a Beautiful & Customized Tab/Toggle in Flutter

    0 shares
    Share 0 Tweet 0
  • Flutter Form & FormField Widget – Implementation & Example

    0 shares
    Share 0 Tweet 0
  • HOME
  • ABOUT US
  • CONTACT US
  • DMCA
  • TERMS & CONDITIONS
  • PRIVACY POLICY
Call us: +234 705 505 5426

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

No Result
View All Result
  • Media
    • Music
    • Video
    • Images
    • Gallery
  • Flutter Apps
    • Finance App
    • Weather App
    • Video App
    • Music App
    • Shopping App
    • World Clock
    • ECommerce
    • Mobile Web Browser
  • Menu
    • Buttons
    • App Bar
    • Floating Action Button
    • Toast
    • Tab Bar
    • Swipe
  • Components
    • Developers Point
    • Animations
    • Loading
    • Flutter Packages
    • WebView
  • Inputs
    • Forms
    • TextField
    • Toggle Button
    • Download
    • Widgets
  • Games
  • UI
    • Material Design
    • Card
    • Flutter Widgets
    • Neomorphism
    • Navigation
  • Navigation
  • Q&A
  • Dart
    • Flutter Methods

© 2020 FlutterFix - Best Flutter Tool, Library, Source Code, Forum and Tutorials FlutterFix.

Welcome Back!

Login to your account below

Forgotten Password? Sign Up

Create New Account!

Fill the forms bellow to register

All fields are required. Log In

Retrieve your password

Please enter your username or email address to reset your password.

Log In