When doing a Flutter widget test, I can get a context from the WidgetTester if I know something about at least one widget in the tree. E.g., if I know there's a Text widget in the test widget tree, I can
BuildContext context = tester.element(find.byType(Text));
How can I get a context more generally? E.g., can I get the root widget of the tree and get its BuildContext?
Declare a navigatorKey using GlobalKey navigatorKey = GlobalKey();. Assign this navigatorKey to your material app widget in your test class.
Example
MaterialApp(
navigatorKey: navigatorKey.........
Then you will be able to access context using navigatorKey.currentContext.
Related
I am trying to make a colour transition animation inside a StreamBuilder which is inside a stateless widget. I have no idea how to perform that since all the examples and tutorials about this subject use a Stateful Widget.
I thought about using FadeTransition Widget but and maybe store the state in my Bloc that controls that view.
Please give me any suggestions if you have, Thank you.
To perform a fade in transition in a streambuilder, it's easy, simply use a widget called AnimatedSwitcher :
#override
Widget build(BuildContext context) {
return StreamBuilder(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (BuildContext context, snapshot) {
return AnimatedSwitcher(
duration: Duration(seconds: 1),
child: _getMainWidget(snapshot, context),
);
},
);
}
Here we use an AnimatedSwitcher to animate a transition when the child of the AnimatedSwitcher change's, the default animation is a fade animation, but you could add your custom animation by passing the widget a TransitionBuilder as an argument
I want to write a readable and beautiful code so that anyone could understand it, as well as the code can be maintainable and scalable.
my code is that is it good or no?
Create stateless widgets for smaller UI Components and compose bigger widgets or pages using these reusable UI widgets. for example :
Widgets Folder:
custom_text.dart (a widget that gives me simple centered text).
custom_button.dart (a custom reusable component).
Pages Folder:
home_page.dart(a widget that includes a scaffold with custom_card
inside)
login_page.dart
here's an example
void main() => runApp(HomePage ());
class HomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Welcome to Flutter',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
),
body: SimpleTextWidget(),
),
);
}
}
this is a small reusable component to be used in your other parent widget.
class SimpleTextWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Center(
child: Text('Hello'),);
}
}
You can maintain different files for keeping widgets and use the import statements for using them in any file. This will also make your code re-usable.
For writing a beautiful code, you must follow the indentation properly and you can also add useful comments to the code which will increase the readability of your code.
It seems Aurelia is not aware when I create and append an element in javascript and set a custom attribute (unless I am doing something wrong). For example,
const e = document.createElement('div');
e.setAttribute('custom-attr', 'some value');
body.appendChild(e);
Is there a way to make Aurelia aware of this custom attribute when it gets appended?
A little background: I am creating an app where the user can select their element type (e.g. input, select, checkbox etc.) and drag it around (the dragging is done in the custom attribute). I thought about creating a wrapper <div custom-attr repeat.for="e of elements"></div> and somehow render the elements array, but this seemed inefficient since the repeater will go through all the elements everytime I push a new one and I didn't not want to create a wrapper around something as simple as a text input that might be created.
You would have to manually trigger the Aurelia's enhance method for it to register the custom attributes or anything Aurelia related really. And you also have to pass in a ViewResources object containing the custom attribute.
Since this isn't as straight forward as you might think, I'll explain it a bit.
The enhance method requires the following parameters for this scenario:
Your HTML as plain text (string)
The binding context (in our scenario, it's just this)
A ViewResources object that has the required custom attribute
One way to get access to the ViewResources object that meets our requirements, is to require the custom attribute into your parent view and then use the parent view's ViewResources. To do that, require the view inside the parent view's HTML and then implement the created(owningView, thisView) callback in the controller. When it's fired, thisView will have a resources property, which is a ViewResources object that contains the require-d custom attribute.
Since I am HORRIBLE at explaining, please look into the example provided below.
Here is an example how to:
app.js
import { TemplatingEngine } from 'aurelia-framework';
export class App {
static inject = [TemplatingEngine];
message = 'Hello World!';
constructor(templatingEngine, viewResources) {
this._templatingEngine = templatingEngine;
}
created(owningView, thisView) {
this._viewResources = thisView.resources;
}
bind() {
this.createEnhanceAppend();
}
createEnhanceAppend() {
const span = document.createElement('span');
span.innerHTML = "<h5 example.bind=\"message\"></h5>";
this._templatingEngine.enhance({ element: span, bindingContext: this, resources: this._viewResources });
this.view.appendChild(span);
}
}
app.html
<template>
<require from="./example-custom-attribute"></require>
<div ref="view"></div>
</template>
Gist.run:
https://gist.run/?id=7b80d2498ed17bcb88f17b17c6f73fb9
Additional resources
Dwayne Charrington has written an excellent tutorial on this topic:
https://ilikekillnerds.com/2016/01/enhancing-at-will-using-aurelias-templating-engine-enhance-api/
I am completely new to Nativescript, I am trying to add class Name dynamically to a gridlayout on tap.
I am not using Angular 2.
How to access the grid layout element and add class name to the same.
All that you need to do is search for the desired element in the UI tree for example by accessing the parent of the Button or by setting an id to the element and using the .getViewById() method of the root of the Page or the Page itself.
Finally in order to set the css class of that View simply set its className property, something like this:
export function onChangeCssClassButtonTap(args) {
var button = args.object as Button;
var parentGridLayout = button.parent as StackLayout;
parentGridLayout.className = "myGridCssClassName";
}
Here are some documentation articles that may be useful to you:
Finding View by its id
Styling in NativeScript
I have drawn a tree with CellTree using GWT 2.5, and when opening the node I want to change the image before the text in the cell. I tried do with ImageResource but don't worked because I don't want change the icon, just the image in the cell container, it is possible to do that in CellTree?
Example in the same node when is open and closed:
+ [image] A
- [new image] A
public void render(Cell.Context context, TreeNode value, SafeHtmlBuilder sb) {
if (value instanceof TreeNode) {
sb.appendHtmlConstant("<div><img src ='/bound.png' width=16 height=16><span class=\"treeElements\">");
sb.appendHtmlConstant(value.getName() + "</span></div>");
}
Any help is welcome!
There are two ways to solve it:
Check in the render method if the node is open (check the CellTreeNodeView class how to do it) and conditionally render the corresponding image.
Use the cellTreeOpenItem() obfuscated classname (it will get set on the Cell when you open it) and CSS selectors to change the image (but then you will probably use background image instead of an img element).