jamesblasco / modal_bottom_sheet Goto Github PK
View Code? Open in Web Editor NEWFlutter | Create advanced modal bottom sheets. Material, Cupertino or your own style
Home Page: https://pub.dev/packages/modal_bottom_sheet
License: MIT License
Flutter | Create advanced modal bottom sheets. Material, Cupertino or your own style
Home Page: https://pub.dev/packages/modal_bottom_sheet
License: MIT License
flutter doctor shows:
[✓] Flutter (Channel master, 1.22.0-10.0.pre.109, on Mac OS X 10.15.6 19G2021, locale en-GB)
modal_bottom_sheet: ^0.2.0+1
during compiling, it fail with:
../../../.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet.dart:295:43: Error: Too few positional arguments: 1 required, 0 given.
_velocityTracker = VelocityTracker();
^
../../../Sandbox/flutter/packages/flutter/lib/src/gestures/velocity_tracker.dart:152:3: Context: Found this candidate, but the arguments don't match.
VelocityTracker(this.kind);
^^^^^^^^^^^^^^^
Looks like flutter changed the interface:
/// Computes a pointer's velocity based on data from [PointerMoveEvent]s.
///
/// The input data is provided by calling [addPosition]. Adding data is cheap.
///
/// To obtain a velocity, call [getVelocity] or [getVelocityEstimate]. This will
/// compute the velocity based on the data added so far. Only call these when
/// you need to use the velocity, as they are comparatively expensive.
///
/// The quality of the velocity estimation will be better if more data points
/// have been received.
class VelocityTracker {
/// Create a new velocity tracker for a pointer [kind].
VelocityTracker(this.kind);
Hi!
I have a question related to using this with a FAB, in this case if I run CupertinoScaffold.showCupertinoModalBottomSheet()
in its onPressed()
-method, it will not have the CupertinoScaffold as a parent. Do you have any idea how to solve this?
Best regards
@override
Widget build(BuildContext context) {
return Scaffold(
drawer: CustomDrawerMenu(),
key: _scaffoldKey,
body: CupertinoScaffold(
body: Builder(
builder: (context) => CupertinoPageScaffold(
backgroundColor: Colors.white,
child: getMainContent(),
),
),
),
floatingActionButton: CustomFAB(
size: 65.0,
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
Webviews do not scroll inside the modal
showModalBottomSheet( context: context, builder: (builder) { return new Container( height: MediaQuery.of(context).size.height / 4, child: new Container( decoration: new BoxDecoration(color: Colors.amber, borderRadius: new BorderRadius.only(topLeft: const Radius.circular(20.0), topRight: const Radius.circular(20.0))), child: Container( child: WebView( initialUrl: 'https://google.com', )), ), ); }, );
I guess it wouldn't work to utilize CupertinoPopupSurface
since it has the border radius on the bottom as well.
Apple's utilizing this translucent blur effect in an increasing amount of overlays, so it might be nice to have this as an option.
Hello!
Can you please tell me how Padding can be applied for the whole bottomSheetDialog?
For example, I need to add padding from left/right and make it transparent from the sides.
thanks!
I´m using your Bottom Sheet like this:
GestureDetector(
onTap: () => showBarModalBottomSheet(
expand: true,
context: context,
builder: (context, scr) => HoursScreen(scr)),
child: MinistryReportChart(
mainValue: minutesData.getSum())),
Bottom Sheet Class:
class HoursScreen extends StatelessWidget {
final ScrollController scrollController;
HoursScreen(this.scrollController);
@override
Widget build(BuildContext context) {
final minutesData = Provider.of<Minutes>(context);
return Material(
child: CupertinoPageScaffold(
child: FutureBuilder<List<Minute>>(
future: minutesData.getAll(), // async work
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Center(
child: CircularProgressIndicator(),
);
default:
if (snapshot.hasError) {
return new Text('Error: ${snapshot.error}');
} else
return CustomScrollView(
physics: ClampingScrollPhysics(),
controller: scrollController,
slivers: <Widget>[
CupertinoSliverNavigationBar(
largeTitle: Text("Stunden"),
border: Border.fromBorderSide(
BorderSide(color: Colors.transparent))),
SliverList(
delegate: SliverChildBuilderDelegate(
// The builder function returns a ListTile with a title that
// displays the index of the current item.
(context, index) => Column(
children: <Widget>[
ListTile(
leading: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
Icons.timer,
color: Theme.of(context).primaryColor,
),
],
),
trailing: Container(
width: 50,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(Icons.edit), onPressed: null)
],
),
),
title: Text(
snapshot.data[index].value.toString() +
" Stunden"),
subtitle: Text(DateFormat("dd.MM.yyyy, HH:mm")
.format(snapshot.data[index].timestamp
.toDateTime())
.toString()),
),
Divider()
],
),
// Builds 1000 ListTiles
childCount: snapshot.data.length,
),
),
],
);
}
},
)),
);
}
}
There are 2 issues:
physics: ClampingScrollPhysics(),
What do you think? Thanks in advance!
Understand that normally we use Navigator.of(context).pop();
to dismiss the modal sheet.
However in my case, there is navigation inside the modal sheet. So, using Navigator.of(context).pop();
will only return to the previous page of the sheet.
I tried to google and use methods such as Navigator.of(context).popUntil((route) => route.isFirst);
but still fail.
Anyone can shed some light on this? Many thanks.
when i try to programmatically scroll my inner scroll widget
mParentScrollController.animateTo( mParentScrollController.position.minScrollExtent, duration: Duration(milliseconds: 50), curve: Curves.linear);
i get this fatal error when using the library.
mParentScrollController is another scroll controller inside the BarModalBottomSheet that is added to a child scroll widget
warning code :
error: The method 'forgetChild' is always abstract in the supertype. (abstract_super_member_reference at [example] lib/examples/sliver_container.dart:72)
i cant run because of this problem and i cant use it another app also.
i hope you can find a solution. i already tried and i lost in lines because Solution hide from me because of code is belong you.
Hi. First of all, thank you for this awesome library.
I've encountered an issue. When I ignore scrollController
, which is passed as the second argument in build
function, and my page uses any widget with its own scroll controller. I get this exception:
VERBOSE-2:ui_dart_state.cc(157)] Unhandled Exception: 'package:flutter/src/widgets/scroll_controller.dart': Failed assertion: line 110 pos 12: '_positions.isNotEmpty': ScrollController not attached to any scroll views.
Here is the code:
import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
onGenerateRoute: (settings) {
return MaterialWithModalsPageRoute(builder: (_) => MyHomePage());
},
initialRoute: '/',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Title'),
),
body: Center(child: Container()),
floatingActionButton: FloatingActionButton(
onPressed: () => showCupertinoModalBottomSheet(
context: context,
builder: (context, _) => Scaffold(
body: Center(
child: TextField(),
),
)),
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Here is example repo
Steps to reproduce:
As far as I can understand, every scroll controller has to be attached to some widget. When we focus on text input, all scroll controllers are triggered, even the one, passed via build function. It is not attached, so I get an error.
As a workaround, I've created a dummy widget and attach the controller to it.
In my opinion, this should be done internally in the library
Hello, I want to dismiss modal manually. is it possible or any sort of params?
Currently to change the duration of opening animation I have to modify the source code of package (variable _bottomSheetDuration
in bottom_sheet_route.dart
), and I think there must be an easier way to do it.
Also I didn't find a way to set curve
at all.
I need to have a draggable bottom sheet with a sticky header.
A quick solution is something like this:
Material(
child: Container(
padding: EdgeInsets.only(left: 16, right: 16, top: 16),
decoration: BoxDecoration(
borderRadius: const BorderRadius.all(Radius.circular(12)),
color: backgroundColor,
),
height: deviceHeight*bottomSheetHeightFraction,
child: SingleChildScrollView(
controller: widget.scrollController,
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
GestureDetector(
onVerticalDragUpdate: (details) {
setState(() {
var move = details.primaryDelta;
var height = (deviceHeight*bottomSheetHeightFraction - move).clamp(deviceHeight*0.3, deviceHeight*0.8);
setState(() {
bottomSheetHeightFraction = (height/deviceHeight).clamp(0.3, 0.8);
});
});
},
child: Icon(IconProvider.arrow_move_up, size: defaultIconSize, color: defaultIconColor),
),
],
),
...List.generate(25, (index) => ListTile(title: Text('List Tile $index', style: TextStyle(color: Colors.white),))),
],
),
)
)
),
and then calling route generator
showMaterialModalBottomSheet(
expand: false,
context: context,
backgroundColor: Colors.transparent,
builder: (context, scrollController) => ......
);
The problem is that the top row is of course not sticky.
If I create a column and inside of it a scrollable list then I get a bottom overflow.
How can this be done? Is there something in the library to cope with this ??
I tried the Bottom sheet with a simple increment integer with a + icon. If I change the state with incrementing a number and I move the bottom sheet, for example sliding a bit down and up, then the new state is lost. It shows me the initial number.
Is this normal that event to close the dialog is fired on moving the sheet? Or is there an error in my code?
By the way: Thanks for your great work!
I'm using this with material scaffold and I wanted to achieve new ios style navigation. It works well except the background of my app is black. How do I change it ?
This:
showBarModalBottomSheet(
context: context,
builder: (context, scrollController) =>
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
Text("dfsddfd")
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
RaisedButton(
child: Text('edit').tr(),
onPressed: () {
},
),
FlatButton(
child: Text('changeOrdering').tr(),
onPressed: () {
},
)
],
)
],
),
),
);
Your web demo is very nice: https://jamesblasco.github.io/modal_bottom_sheet/#/
Looks very clean, device frame is well aligned, content is perfectly inside. Maybe worth it to be its own library?
In the future could add configurations for different devices, etc.
Hello, is there any way to programmatically close the seet?
This is an amazing package for use on the phone. However, it doesn't translate well on a tablet. Instead of animating the previous route, I just want to have a simpler sheet to show.
I tried setting backgroundColor
to Colors.black12
and the bottom sheet route to have padding, but the boxShadow
is still visible.
This is what I am trying to match:
Reference: https://medium.com/@hacknicity/view-controller-presentation-changes-in-ios-13-ac8c901ebc4e
I call showMaterialModalBottomSheet. There are radio group buttons. I want to close the modal sheet when radio is tabbed. Is there any method for closing manually? Sometimes people need to close the sheet by calling function. Looking forward to your answer.
Hi James,
Thank you for sharing this package, it is something I've been waiting for a long time to implement into my application.
However, I noticed the animation for the generic modal bottom sheet has a very low framerate (laggy). I am not sure if that is an issue caused from my end or not.
This is what the animation looks like on my actual device (not the iOS simulator)
I'm invoking the modal bottom sheet with the following code:
showCupertinoModalBottomSheet( context: context, builder: (context, scrollController) => Container(), })
What are your thoughts?
Cheers!
This is an my modal sheet:
String _prevText =
await Provider.of<FirebaseDataProvider>(context, listen: false)
.getMarquee();
TextEditingController _marqueeController =
TextEditingController(text: _prevText);
return showBarModalBottomSheet(
context: context,
expand: true,
builder: (BuildContext context, ScrollController scrollController) {
return Material(
child: Container(
// height: MediaQuery.of(context).size.height * 0.3,
color: Theme.of(context).colorScheme.primary,
child: Padding(
padding: const EdgeInsets.all(12.0),
child: ListView(
controller: scrollController,
shrinkWrap: true,
children: <Widget>[
AutoSizeText(
title,
style: TextStyle(
color: Theme.of(context).colorScheme.onPrimary),
),
TextField(
decoration: InputDecoration(hintText: 'escribe aquí'),
controller: _marqueeController,
autofocus: true,
),
FlatButton(
color: Colors.green,
child: AutoSizeText(
'OK',
style: TextStyle(color: Colors.white),
),
onPressed: () {
Provider.of<FirebaseDataProvider>(context,
listen: false)
.setMarquee(_marqueeController.text);
Navigator.of(context).pop();
},
),
FlatButton(
color: Colors.red,
child: AutoSizeText(
'Cancelar',
style: TextStyle(color: Colors.white),
),
onPressed: () {
Navigator.of(context).pop();
},
),
],
),
),
),
);
});
}
}
So right now I have to fix the height to mediaquery * 0.6 so that keyboard does not interfere with textfileld inside the modal sheet. But I would really like for the size to change depending on the keyboard size.
I am going to attach a few pictures representing expand setting with and without keyboard...
The iOS status bar color should usually stay the same. However one I surround my CupertinoPageScaffold
with CupertinoScaffold
. It changes its default color to white (on white background).
CupertinoApp(
home: CupertinoScaffold(
body: CupertinoPageScaffold(
child: Container(),
),
),
);
Although this works fine:
CupertinoApp(
home: CupertinoPageScaffold(
child: Container(),
),
);
I'm getting an error after upgrading to version 0.2.0
════════ Exception caught by scheduler library ═════════════════════════════════════════════════════
The following assertion was thrown during a scheduler callback:
ScrollController not attached to any scroll views.
'package:flutter/src/widgets/scroll_controller.dart':
Failed assertion: line 110 pos 12: '_positions.isNotEmpty'
When the exception was thrown, this was the stack:
#2 ScrollController.position (package:flutter/src/widgets/scroll_controller.dart:110:12)
#3 _ModalBottomSheetState._handleScrollUpdate (package:modal_bottom_sheet/src/bottom_sheet.dart:261:46)
#4 _ModalBottomSheetState.build.<anonymous closure>.<anonymous closure>.<anonymous closure> (package:modal_bottom_sheet/src/bottom_sheet.dart:376:27)
#5 NotificationListener._dispatch (package:flutter/src/widgets/notification_listener.dart:129:41)
#6 Notification.visitAncestor (package:flutter/src/widgets/notification_listener.dart:47:20)
...
I would like to use this library by skipping the show__Sheet
method and rendering the modal directly.
I understand that ModalBottomSheet
documentation says it is 'rarely used directly', but can it be?
So far I have tried returning simply with a ModalBottomSheet
, but nothing appears on the screen.
Before spending more time on this, I though I would ask if this is even possible and if so, is there an example somewhere for it?
Thank you
1 When you are using a BouncingScrollPhysics and scroll down the screen you see that the scroll startet to go under the borders. I understand why it's going. How I can get around it for make "as native" behawiour? For when I swipe down the window scroll stay at his place
2 If you make Cupertino Modal with inside navigation there will no way to create the next screen in stack with scroll which will afford you to swipe down all the navigation stack. Because scrollController which I receive from builder I can attach to only the first window at navigation stack
Problem:
If you put nested scrollables inside the bottom sheet, then the scroll controller will handle scroll notifications from both of it.
It leads to unexpected behavior f.e. when you have a parent vertical scrollable and put a horizontal scrollable in it.
In this way, if you scroll the horizontal scrollable to the start then the sheet will handle scroll notifications, start tracking your gestures and try to close the sheet.
Solution description:
According to Flutter Docs, it may be fixed very easily (I hope) by adding one line of code.
Notifications bubble up through the tree, which means a given NotificationListener will receive notifications for all descendant Scrollable widgets. To focus on notifications from the nearest Scrollable descendant, check that the depth property of the notification is zero.
Solution:
So you can just add here notification.depth==0
to handle notification only from the top scrollable widget.
I'm want to update state when modal is closed, but I don't know how to detect that. Any ideas ?
After installing the library and trying out the example simple show alert code, the code does not compile.
I get the following error
Compiler message: ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet.dart:184:3: Error: Type 'ParametricCurve' not found. ParametricCurve<double> animationCurve; ^^^^^^^^^^^^^^^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet.dart:184:3: Error: Expected 0 type arguments. ParametricCurve<double> animationCurve; ^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet.dart:318:3: Error: Type 'ParametricCurve' not found. ParametricCurve<double> get _defaultCurve => ^^^^^^^^^^^^^^^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet.dart:318:3: Error: Expected 0 type arguments. ParametricCurve<double> get _defaultCurve => ^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/utils/bottom_sheet_suspended_curve.dart:28:41: Error: Type 'ParametricCurve' not found. class BottomSheetSuspendedCurve extends ParametricCurve<double> { ^^^^^^^^^^^^^^^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/utils/bottom_sheet_suspended_curve.dart:28:41: Error: Expected 0 type arguments. class BottomSheetSuspendedCurve extends ParametricCurve<double> { ^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet.dart:184:3: Error: 'ParametricCurve' isn't a type. ParametricCurve<double> animationCurve; ^^^^^^^^^^^^^^^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet_route.dart:42:27: Error: Getter not found: 'linux'. case TargetPlatform.linux: ^^^^^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet_route.dart:43:27: Error: Getter not found: 'macOS'. case TargetPlatform.macOS: ^^^^^ ../../../flutter/.pub-cache/hosted/pub.dartlang.org/modal_bottom_sheet-0.2.0+1/lib/src/bottom_sheet_route.dart:44:27: Error: Getter not found: 'windows'. case TargetPlatform.windows: ^^^^^^^ Target kernel_snapshot failed: Exception: Errors during snapshot creation: null Failed to build bundle. Error launching application on iPhone 8.
This is how I am using it:
showCupertinoModalBottomSheet(
context: context,
builder: (context, scrollController) => MySuperPage(),
);
showMaterialModalBottomSheet(
context: context,
backgroundColor: Colors.transparent,
builder: (BuildContext context, sc) {
// It is called repeatedly many times unnecessarily.
// Is it only me ?
return Text("");
}
);
}
Hi,
Great stuff!
Is it possible to set the background of the new modal to complete transparency? I'm planning to use the barrierColor to make the whole background a little greyed out instead.
(CustomAdd() contains a top padding)
Right now I'm using modal_bottom_sheet 0.2.0+1
from https://pub.dev/packages/modal_bottom_sheet
CupertinoScaffold.showCupertinoModalBottomSheet(
expand: true,
context: context,
backgroundColor: Colors.transparent,
builder: (context, scrollController) => Material(
child: CustomAdd(),
color: Colors.transparent,
),
);
Best regards
When sliding the sheet, it will always cause reconstruction,
In some cases this can cause performance issues 😢
Is it possible to achieve something like Rubber
plugin does? https://pub.dev/packages/rubber
I need to run a specific function when the modal sheet is closed or return some value,
So is it possible to expose some API from CupertinoModalBottomSheetRoute
which is rendered in showCupertinoModalBottomSheet
await showCupertinoModalBottomSheet(
context: context,
builder: (context, scrollController) => Container();
popped: () {
print('Modal is closed')
}
);
or
the return value from widget which is rendered
T result = await showCupertinoModalBottomSheet<T>(
context: context,
builder: (context, scrollController) => Container();
);
Hello, how are you? i would like to know if there is a possibility to show the modal with an specific width proporcional of the screen device, now is using by default the full widht of the screen.
It seems the shape
parameter is redundant because BarBottomSheet
already Hardcoded the value.
Almost perfect except :
sometimes when I let ago while dragging,
the sheet doesn't go back to the top and just stops there. It happens quite frequently.
The animation curve is ugly.
Please provide a parameter to pass the animation curve. Haven't read the code but is this related to PageRoute ?
Provide a parameter for the dismiss threshold.
Personally, I feel it's a bit hard to dismiss. I prefer it easier to dismiss.
I am using dev channel of flutter.
Regards
Hiroshi
Hi, I tried to dismiss the modal with a button press within the modal (#24) by calling Navigator.of(context).pop()
but when I do, the modal shows an animation of going back to a previous screen within the modal (a plain blank modal) instead of being dismissed. It then shows this error in my console:
flutter: Another exception was thrown: 'package:flutter/src/widgets/navigator.dart': Failed assertion: line 3803 pos 12: '_history.isNotEmpty': is not true.
I'm using showCupertinoModalBottomSheet
to be able to have navigation within the modal.
In addition, when I call showCupertinoModalBottomSheet
I'm also supplying the shape parameter.
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(50)),
...
No matter what value I put in BorderRadius.circular()
, the radius of the edges of my modal stays the same. Any insight would be appreciated!
Hello, this is a great component. I fell in love with it at the first sight. I hope I can use it all the time.
I have a requirement now. I want content to show different styles at different heights. However, I use the modal_bottom_sheet to find that either close or display can't slide to different heights.
Maybe I don't know how to use it, or it needs some updates.
Thank you.
First of all: I love your plugin. Thanks for your good work!
Just a question. I would like to use the Bar version of the BottomSheet (showBarModalBottomSheet
). But for the transition of the previous route I have to use it with CupertinoScaffold.showCupertinoModalBottomSheet
. There I can use only the basic version of the Modal, right?
How can I use the bar-version here? I have no specific route for my Bottom Sheet. I open it like that:
class MinistryReportHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
backgroundColor: Colors.white,
navigationBar: CupertinoNavigationBar(
middle: Text("Juni 2020",
style: Theme.of(context).appBarTheme.textTheme.headline1),
backgroundColor: Theme.of(context).primaryColor,
),
child: CupertinoScaffold(
body: Container(
color: Theme.of(context)
.cupertinoOverrideTheme
.scaffoldBackgroundColor,
child: new Builder(
builder: (context) => SafeArea(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
HomeSummary(),
FloatingActionButton(
child: Icon(Icons.add),
backgroundColor: Theme.of(context).primaryColor,
onPressed: () =>
CupertinoScaffold.showCupertinoModalBottomSheet(
duration: Duration(milliseconds: 350),
context: context,
builder: (context, scrollController) =>
AddReportDataDialog(scrollController))),
]),
),
),
),
));
}
}
Thanks so much for your help! :)
RaisedButton(
child: const Text('Action'),
onPressed: () {
CupertinoScaffold.showCupertinoModalBottomSheet(
context: context,
builder:(context, scrollController) => Container()
);
},
),
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.