BranchesTags

Repository files navigation

flutter_dialpad

A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.

This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false

Getting Started

@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); }

Pre-built UIs

Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.

UI Scaling

A few considerations:

ScalingType

DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.

ScalingSize

Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.

Scalable

If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.

Clamping

Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.

Screenshots

iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot

To Do

[Done] Add DTMF Tones

  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask

About

A Phone Dialpad for your Flutter Application

Resources

Readme
BSD-3-Clause license
Activity

Stars

24 stars

Watchers

3 watching

Forks

39 forks
Report repository

Releases

Packages

Used by

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all 
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix");
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms");
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links");
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default");
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers");
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages

, 'i');
if (__m === '*' || __re.test(location.href)) {
injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode");
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();

Skip to content
BranchesTags
Repository files navigation
flutter_dialpad
A phone dialer widget that can be added to any Flutter Application to enable the ability to dial a number. This could be combined with a VoIP application to enable placing calls.
This is a purely Dart widget with no dependency on Android or iOS except for the flutter_dtmf package it uses for DTMF tone generation on pressing a button. You can turn it off by setting enableDtmf: false
Getting Started
@override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.black, body: SafeArea( child: DialPad( // temporarily disabled // enableDtmf: true, outputMask: "(000) 000-0000", backspaceButtonIconColor: Colors.red, makeCall: (number){ print(number); } ) ), ); } 
Pre-built UIs
Support has been added for custom UIs, using Dialpad.ios for iOS style keypad or DialPad.metro metro theme. Additional customization is available with many different options.
UI Scaling
A few considerations:
ScalingType
DialPad supports dynamic scaling of UI. Using either a ScalingType.fixed approach will use preset text & icon sizes. If you are using flutter_web_frame with some window constraints, you may wish to use ScalingType.height. For most cases ScalingType.min should suffice.
ScalingSize
Scaling Size provides an easy way to specify the scalar multiplier for the scaling calculation. Instead of using a predefined value of e.g. 0.001, the ScalingSize.small is now used. Customization for buttons allows making the dial button large with a small backspace button.
Scalable
If you wish to add your own Scalable button, feel free to create a widget with Scalable to make use of the rescale function.
Clamping
Scaled UI elements may become extremely small, using minScalingSize and maxScalingSize you can clamp the scaling to a percentage of the original size. This is useful for ensuring the UI is still usable.
Screenshots
iOS ScreenshotAndroid Screenshot
iOS ScreenshotAndroid Screenshot
To Do
[Done] Add DTMF Tones
  • Shrink Ouput to Fit
  • Support for Local Numbers in Text Input Mask
About
A Phone Dialpad for your Flutter Application
Resources
Readme
BSD-3-Clause license
Activity
Stars
24 stars
Watchers
3 watching
Forks
39 forks
Report repository
Releases
Packages
Used by
Contributors
Languages