Skip to content

rxEntry added #5

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
ahmad-crossplatform wants to merge 3 commits into
base: master
Choose a base branch
from
Open

rxEntry added #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c6d8cff
rxEntry added
Dec 10, 2018
37ff0e0
Modify Entry so it takes two commands one for the input and the other…
tombby11 Dec 28, 2018
9673bdd
Fixing the class name to RxEntry and fixing the documentation of the…
tombby11 Dec 28, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 71 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,38 @@ Add to your `pubspec.yaml` dependencies to `rx_widgets`

## Available Classes

### RxEntry
Creates a `TextField` widget that takes an `RxCommand<String,String>` as an argument where it takes the input texts and returns the validation message if there is a validation error.

```Dart


RxEntry(
{this.hintText = "",
this.filledColor = Colors.transparent,
this.fieldName,
this.textStream,
this.validationStream,
this.obscureText = false,
this.icon,
this.focusedBorderColor = Colors.transparent,
this.focusedBorderWidth = 0,
this.unfocusedBorderColor = Colors.transparent,
this.unfocusedBorderWidth = 0,
this.borderRadius = 0});
```
Example:
```Dart
RxEntry(
icon: Icons.person,
fieldName: "Username",
validationStream: usernameValidation
textStream: usernameChanged);
```
Where `usernameChanged` and `usernameValidation` are of type `RxCommand<String,String>`

### RxRaisedButton
Creates a RaisedButton that has an rxCommand instead of onPressed. It gets disabled if the command has canExecute:false or when isExecuting:true
Creates a `RaisedButton` that has an rxCommand instead of onPressed. It gets disabled if the command has canExecute:false or when isExecuting:true

```Dart
/// an extended `RaisedButton` where the `onPressed` is replaced with `rxCommand`
Expand Down Expand Up @@ -62,6 +92,46 @@ const RxRaisedButton({
animationDuration: animationDuration,
child: child,
);

/*Title of the entry that would show above the text*/
final String fieldName;
/**
* `RxCommand<String,String>` where the input is the text entered, and the output is the validation text
* For exmaple:
*```
* String username;
* RxCommand<String, String> usernameChanged;
* MyClass()
* {
* username = "";
* usernameChanged = RxCommand.createSync<String, String>((s)
* {
* username = s;
* if (s.isEmpty)
* return "Cannot be empty";
* if (s.length==3)
* return "Cannot be 3 characters";
* return "";
* });
*```
*/
final RxCommand onChanged;

/// To hide the text (mainly used for passwords)
final bool obscureText;

/// Icon which would be placed to the left of the text
final IconData icon;

final double focusedBorderWidth;
final Color focusedBorderColor;
final double unfocusedBorderWidth;
final Color unfocusedBorderColor;
final double borderRadius;
final Color filledColor;

/// The place holder
final String hintText;
```


Expand Down
2 changes: 1 addition & 1 deletion lib/rx_widgets.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
library rx_widgets;

export 'src/rx_entry.dart';
export 'src/rx_raisedButton.dart';
export 'src/rx_spinner.dart';
export 'src/rx_text.dart';
Expand Down
173 changes: 173 additions & 0 deletions lib/src/rx_entry.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
import 'package:flutter/material.dart';
import 'package:rx_command/rx_command.dart';

///A `TextField` based widget that takes `RxCommand<String,String>` as input stream and another optional `RxCommand<String,String>` for validation.
/// ```
/// RxEntry(
/// icon: Icons.person,
/// fieldName: "Username",
/// validationStream: usernameValidation,
/// textStream: usernameChanged);
/// ```
/// Where `usernameChanged` and `usernameValidation` are of type `RxCommand<String,String>`
class RxEntry extends StatelessWidget {
RxEntry(
{this.hintText = "",
this.filledColor = Colors.transparent,
this.fieldName,
this.textStream,
this.validationStream,
this.obscureText = false,
this.icon,
this.focusedBorderColor = Colors.transparent,
this.focusedBorderWidth = 0,
this.unfocusedBorderColor = Colors.transparent,
this.unfocusedBorderWidth = 0,
this.borderRadius = 0});
@override
Widget build(BuildContext context) {
return StreamBuilder(
stream: validationStream,
initialData: "",
builder: (context, snapshot) {
if (!snapshot.hasData || snapshot.data.isEmpty)
return TextField(
obscureText: obscureText,
onChanged: (s) {
textStream(s);
validationStream(s);
},
decoration: InputDecoration(
hintText: hintText,
fillColor: filledColor,
filled: true,
labelText: fieldName,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
borderSide: (this.focusedBorderColor != Colors.transparent &&
this.focusedBorderWidth > 0)
? BorderSide(
color: this.focusedBorderColor,
width: this.focusedBorderWidth,
)
: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
borderSide: (this.unfocusedBorderColor != Colors.transparent &&
this.unfocusedBorderWidth > 0)
? BorderSide(
color: this.unfocusedBorderColor,
width: this.unfocusedBorderWidth,
)
: BorderSide.none,
),
prefixIcon: icon != null ? Icon(icon) : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
),
),
);
else
return TextField(
obscureText: obscureText,
onChanged: (s) {
textStream(s);
validationStream(s);
},
decoration: InputDecoration(
hintText: hintText,
errorText: snapshot.data,
fillColor: filledColor,
filled: true,
labelText: fieldName,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
borderSide: (this.focusedBorderColor != Colors.transparent &&
this.focusedBorderWidth > 0)
? BorderSide(
color: this.focusedBorderColor,
width: this.focusedBorderWidth,
)
: BorderSide.none,
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
borderSide: (this.unfocusedBorderColor != Colors.transparent &&
this.unfocusedBorderWidth > 0)
? BorderSide(
color: this.unfocusedBorderColor,
width: this.unfocusedBorderWidth,
)
: BorderSide.none,
),
prefixIcon: icon != null ? Icon(icon) : null,
border: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(borderRadius),
),
),
),
);
},
);
}

///Title of the entry that would show above the text
final String fieldName;

/**
* `RxCommand<String,String>` where the input is the text entered, and the output is the validation text.
* If there is not validation then this can be set to null;
* For exmaple:
*```
* String username;
* RxCommand<String, String> usernameValidation;
* MyClass()
* {
*
* usernameValidation = RxCommand.createSync<String, String>((s)
* {
* if (s.isEmpty)
* return "Cannot be empty";
* if (s.length==3)
* return "Cannot be 3 characters";
* return "";
* });
*```
*/
final RxCommand validationStream;


/// a stream of type `RxCommand<String,String>` that would take the user's input
final RxCommand textStream;




/// To hide the text (mainly used for passwords)
final bool obscureText;

/// Icon which would be placed to the left of the text
final IconData icon;

final double focusedBorderWidth;
final Color focusedBorderColor;
final double unfocusedBorderWidth;
final Color unfocusedBorderColor;
final double borderRadius;
final Color filledColor;

/// The place holder
final String hintText;
}