I'm working on a mobile app that requires a login page. I already coded the home page. And i want app to start with login page, not the page i coded. Is there a way to start the app with another class except myapp class ?
I tried to start runApp(ClassThatIWant()); but seems like thats not working.
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: VoiceHome(),
);
}
}
You always run MyApp(). You access your login by doing this:
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: YourLoginPage(),
);
}
}
it is also common to use Routes, like this:
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: "My app name",
routes: {
'/': (BuildContext context) => YourLoginPage(),
'/home': (BuildContext context) => VoiceHome(),
'/otherscreen': (BuildContext context) => OtherScreen(),
'/etc': (BuildContext context) => EtcScreen(),
},
);
}
}
and refer to it by doing:
Navigator.pushNamed(context, '/home');
Related
I'm using react with typescript in SharePoint framework. I want to call method in another class from main class.
I need same 1 as output in console for all three console.log calls
class MainPage extends React.component<Iprops, Istate>
{
constructor(props?: Iprops, state?: Istate) {
super(props);
this.state = {
status: 0,
};
}
public firstMethod(e): void {
this.setState({ status: 1 });
console.log(this.state.status);
var Obj = new AnotherClass();
Obj.secondMethod();
}
public ThirdMethod(): void {
console.log(this.state.status);
}
public render(): React.ReactElement<Iprops> {
return <div> <button onClick={this.firstMethod.bind(this)}>Click me</button>
</div>;
}
}
class AnotherClass extends React.Component {
constructor() {
super(props);
}
public SecondMethod(): void {
var obj1 = new MainPage();
console.log(obj1.state.status);
obj1.thirdMethod();
}
}
Thanks in advance
The one of the solution which I have found for it.
SystemChrome.setSystemUIOverlayStyle(
SystemUiOverlayStyle(statusBarColor: Colors.transparent));
AFAIK, the one you've found is actually a better solution. You can check it from the Flutter documentation.
setSystemUIOverlayStyle method
void setSystemUIOverlayStyle (
SystemUiOverlayStyle style
)
Specifies the style to use for the system overlays that are visible
(if any).
I've written a basic example to check how it looks.
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main() {
SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
statusBarColor: Colors.transparent,
));
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
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> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.blue,
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Output:
Regarding the size, it seems that using the Flutter built-in solution is a better practice than using 3rd party plugins. There are also some things that you can do to reduce the size of your application. Check this blog for some tips. To summarize, these are the listed items in the said blog that you need to optimize:
Image Asset
Use Google Fonts
Icons
Dynamic App Delivery
Cache
Proguard
Use Specific Libraries
In the documentation, you can check about "Measuring your app's size". As most of the developers are concerned with the size of the app so Flutter made this documentation available.
I am creating spfx webpart with React framework.
I am having render method where all the controls were rendered. i am having a button, few checkboxes in the DOM which will send data to SharePoint using post method this.context.spHttpClient.post when user clicks on button. I am able to submit the data to SharePoint. But once I submit the data I am not able to reload the spfx webpart. I have to reload the web part again without reloading the page. I have tried to call the render method again. Of course it may not be correct way, so it is not working.
You can either call a force reload or set state as shown here and here
"By default, when your component’s state or props change, your component will re-render. If your render() method depends on some other data, you can tell React that the component needs re-rendering by calling forceUpdate().
Calling forceUpdate() will cause render() to be called on the component, skipping shouldComponentUpdate(). This will trigger the normal lifecycle methods for child components, including the shouldComponentUpdate() method of each child. React will still only update the DOM if the markup changes.
Normally you should try to avoid all uses of forceUpdate() and only read from this.props and this.state in render()."
You should use this methods:
componentDidMount()
componentDidUpdate(prevProps, prevState, snapshot)
componentWillUnmount()
shouldComponentUpdate(nextProps, nextState)
More info here https://reactjs.org/docs/react-component.html.
For example, in a project i have a list of buttons and i do a click so i send the event to another component that use the state:
LeftPanel.tsx :
import * as React from 'react';
import { Button } from 'react-bootstrap';
import { Event } from '../interfaces/Event';
import '../components/GruposDeColaboracion.module.scss';
import '../css/leftPanel.css';
export class LeftPanel extends React.Component {
constructor(public props, public context) {
super(props, context);
}
private getAllGroups = (e) => {
this.clearState();
this.setActive('allGroups');
this.props.setEvent(Event.GET_ALL_GROUPS);
//e.stopPropagation();
}
public render():JSX.Element{
return (
<div className="list-group">
<Button
id="allGroups"
onClick={this.getAllGroups}
className="list-group-item rounded-0 list-group-item-action btn btn-default active">
Todos
</Button>
</div>
);
}
}
MainPanel.tsx:
import * as React from 'react';
import { LeftPanel } from '../views/LeftPanel';
import { CenterPanel } from '../views/CenterPanel';
import { IHomeState } from '../interfaces/IHomeState';
export class MainPanel extends React.Component<{}, IMainState> {
constructor(public props, public context) {
super(props, context);
this.state = {
event: null
};
}
private getEvent = (event) => {
this.setState({ event: event });
}
public shouldComponentUpdate(nextProps, nextState): boolean {
if (this.state.event != nextState.event) {
return true;
}
return false;
}
public render(): JSX.Element {
return (
<div className="row">
<div className="col-md-2" style={{ maxWidth: '250px' }}>
<LeftPanel setEvent={this.getEvent} />
</div>
<div className="col-md-10">
<CenterPanel event={this.state.event} context={this.props.context} />
</div>
</div>
);
}
}
CenterPanel.tsx :
export class CenterPanel extends React.Component<{}, ICenterPanelState> {
constructor(public props, public context) {
super(props, context);
}
public componentWillMount() {
this.state = {
render: <Spinner />
};
}
public componentWillReceiveProps(nextProps) {
if (nextProps.event == Event.GET_ALL_GROUPS) {
let dataForRender = 'Hello';
this.setState({
render: <ResponseHandler data = {dataForRender}/>
});
}
}
public render():JSX.Element{
return(
<div>
{this.state.render}
</div>
);
}
}
ResponseHandler.tsx :
import * as React from 'react';
export class ResponseHandler extends React.Component {
constructor(public props, public context) {
super(props, context);
}
public render():JSX.Element {
return (
<div>
{this.props.data}
</div>
);
}
}
In this example you can see:
Left panel use this.props.setEvent('custom event') to send the event from MainPanel.
In main panel private getEvent = (event) => {...} recive the event and change the state and in render method i have: . You can see the event={this.state.event} that change the prop event in the class CenterPanel.
In center panel public componentWillReceiveProps(nextProps) {....} recive the event and and use state to render.
I want to rewrite jsx to tsx. I have a code that rewrite method from react-bootstrap method:
import {Panel} from 'react-bootstrap';
class CustomPanel extends Panel {
constructor(props, context) {
super(props, context);
}
handleClickTitle = () => {
return;
}
}
Typescript compilator throw exception
Base constructors must all have the same return type
How to fix it? Typescript version 2.3.4
Dirty hack for react-bootstrap inheritance
const UntypedPanel = Panel as any;
class CustomPanel extends UntypedPanel {
handleClickTitle = () => {
return;
}
}
const TypedCustomPanel = CustomPanel as any as React.ClassicComponentClass<PanelProps>;
Here is my solution: also feel dirty
import { ComponentClass } from 'react';
class CustomPanel extends (Panel as ComponentClass) {
// others...
I upgraded to babel version 6 and I am using "es2015", "react", "stage-0" as presets. I am working with react using es6 syntax.
Everything was working fine until the upgrade. After the upgrade I started to get exceptions in places where I make super call to parent constructor.
For example for the following class:
class childForm extends ParentForm {
constructor(props, context) {
console.log("this get printed.");
super(props, context);
console.log("this is not printed");
}
...
}
class ParentForm extends React.Component {
constructor(props, context) {
console.log("this is printed");
super(props, context);
console.log("this is printed too");
}
...
}
class AnotherComponent extends React.Component {
constructor(props) {
super(props);
this.state = {};
myService.findById(this.props.params.id).then(result => {
this.setState({result: result});
}).catch(err => {
/**** Error is catched here ******/
console.log(err);
});
}
render(){
return <div>{this.state.result && <ChildForm/>}</div>
}
}
I got the following errors on the console:
TypeError: (0 , _typeof3.default) is not a function(…)
ReactCompositeComponent.js?cd59:443 Uncaught (in promise) TypeError: Cannot read property 'context' of null(…)
React function that throws the error is the following function. The exception raised at ReactCompositeComponentMixin.updateComponent
updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {
var inst = this._instance;
var nextContext = this._context === nextUnmaskedContext ? inst.context : this._processContext(nextUnmaskedContext);
....
If I carry all the functionalities of the parent class to child class, it works as expected. Do anyone encountered a similar problem?
Also is it possible to have better exception messages using some library or plugin for react?
This might be an issue around class compilation. It looks like it can cause an error currently if the child class is declared before the superclass.
Trying this on babeljs.io currently results in an error:
class A extends B {
constructor(x) {
super(x);
}
}
class B {
constructor(x) {
console.log(x);
}
}
new A('a');
Try changing the order of the class definitions:
class ParentForm extends React.Component {
constructor(props, context) {
super(props, context);
}
...
}
class childForm extends ParentForm {
constructor(props, context) {
super(props, context);
}
...
}
EDIT: It seems that Chrome's classes behave pretty much the same, Uncaught ReferenceError: B is not defined(…) is thrown at declaration.
Installing babel-runtime#6.3.19 should solve the problem. Checkout the issue https://phabricator.babeljs.io/T6644