FAQs
How do I decide which widget must be stateful and which one must be stateless?
How do I go about learning Flutter if I already know React Native?
How do I extract files in Windows?
I want to extract files in Windows.
Solution:
• Unzip the file.
• Right click on the extracted file and select `View files`.
NOTE: We don't provide support for Windows. It's completely buyer's responsibility.
How do I customize the app?
I need to customize certain widgets used in the app. How can I do it?
Solution:
The whole app is made modular , so customising the widgets used in the app will be a cakewalk. Every reusable widget used in the app are separated into different dart files under the components directory. Each of these widgets take the required parameters and a list of data items. These widgets can be modified to app requirements and is completely modular in structure.
Consider we have a custom component called customWidget which is structured as follows:
import 'package:flutter/material.dart';
class customWidget extends StatelessWidget {
String text;
customWidget({this.text});
@override
Widget build(BuildContext context) {
Size screenSize = MediaQuery.of(context).size;
return
new Container(
height: screenSize.height / 4,
width: screenSize.width,
decoration: new BoxDecoration(
color: Colors.black54,
),
child: new Center(
child:
new Text(
text,
textAlign: TextAlign.center,
style: new TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
),
);
}
}
The above component renders a container of the specified size with the text given to it, in the centre. This custom widget can be used all over the app by passing varying text to be displayed. The usage of this component is shown below:
@override
Widget build(BuildContext context) {
return new Scaffold(
body: new ListView(
children: <Widget>[
new customWidget(text:"Hello"),
new customWidget(text:"World!"),
],
),
);
}
How do I style widgets?
I need to use custom colours and also use certain primary colours and themes across my whole app.
Solution:
Under the Theme directory exists a style.dart
that specifies the primary ThemeData.
ThemeData has several parameters which can be used to specify style properties to be used across the app.
Specify these in one place and use it across the app as shown below:
ThemeData appTheme = new ThemeData(
primaryColor: new Color.fromRGBO(12, 100, 249, 1.0),
primaryTextTheme: new TextTheme(
display1: new TextStyle(
color: new Color.fromRGBO(68, 68, 68, 1.0),
fontSize: 16.0,
fontWeight: FontWeight.bold,
),
Usage:
Pass it to the theme property of the MaterialApp widget.
new MaterialApp( theme:appTheme, )