Practical application scenarios of Flutter – IOT field

Since the Google Developer Conference, I have been itching to try Flutter, but I found that it is not a JS framework that requires bridge to repeatedly build wheels. In 2016, I tried to use the React-Native development App, and found it was really difficult to use Flutter. After two years of searching for a hybrid frame that could span the Bridge, the Flutter appeared

Why IOT – because I have been working on similar projects recently including the article Demo section

Main idea of the article – show the pit filling process & how to get started quickly

The target

• Achieve high output
• A set of code to build a high performance iOS&Android client
• Minimize your reliance on Native

DEMO

An introduction to

The website is a must see. If you type a few examples carefully, a hundred or so lines of code should give you an idea of how the Flutter framework runs. The rest is to fill in the holes step by step.

Write first – Never mind the cost of learning…

The Dart language

If you’re familiar with Java or JS, you’ll see some of those languages in Dart, which I didn’t know what Dart was about until now.

Why don’t you just read the article and create variables? Var is no problem, but first you need to know the name of the object, I am basically all the way to guess all the way write…

Flutter

All Widgets can be understood as UI components are Widget objects, which integrate Material and Cupertion Design style controls, such as Button. I think RaisedButton is good-looking, iOS can be used directly without packaging, and the two platforms maintain a high degree of consistency. There are many similar controls, the Demo will list the common ones

Or RN? Remember AlertIOS and xxxIOS specifying platforms that are so garbage that they explode,RN fans don’t yell at me…

What does the SDK look at? The following points need to be noted

– What is the name of the control?

TableView – > ListView

CollectionView ->GridView

Label -> Text

TextField -> TextField

The Button – > RaisedButton | | MaterialButton | | FlatButton | | CupertinoButton with along with you

If you want to use an iOS control such as Switch, use the design style + the control name, such as CupertinoSwitch

– How to create controls?

Container(
  margin: EdgeInsets.only(top: 20),
  alignment: AlignmentDirectional.center,
  child: Text(
    'Shanghai',
    style: TextStyle(
        fontSize: 20, color: Colors.white, fontWeight: FontWeight.bold),
  ),
),Copy the code

Container topView() {
  returnContainer(height: screenHeight * 0.33, color: Colors. Blue, child: ListView(physics: new NeverScrollableScrollPhysics(),//Ban Scroll Gesture controller: scrollController, //Listener scrollDirection: Axis.horizontal, children: devicesList(), )); } List<Widget>devicesList() {
  _presenter.getDeviceList();
  List<Widget> cell = new List();
  for (var i = 0; i < _presenter.deviceList.length; ++i) {
    DeviceData device = _presenter.deviceList[i];
    cell.add(deviceCell(i, device));
  }
  return cell;
}Copy the code

StatelessWidget Stateless - Does not need to manage child control state refreshesCopy the code

class MineController extends StatefulWidget {
  @override
  _MineControllerState createState() => _MineControllerState();
}

class _MineControllerState extends State<MineController> {
  @override
  Widget build(BuildContext context) {
    returnThat Scaffold(// whole page holds the object appBar: appBar (// Navigation style backgroundColor: colors.white, elevation: 0.0,// Shadow title: Text('Mine'), // title), body: ListView(children: cellView()), // main view); }Copy the code

class HomeController extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme: ThemeData(primaryColor: Colors.white), home: HomeCtrl());
  }
}

class HomeCtrl extends StatefulWidget {
  @override
  _HomeCtrlState createState() => _HomeCtrlState();
}
class _HomeCtrlState extends State<HomeCtrl> {
  HomePresenter presenter = new HomePresenter();

  @override
  Widget build(BuildContext context) {
    returnNew Scaffold(drawer: drawer (), //'Home'White, elevation: 1.0, Actions: <Widget>[IconButton(icon: icon (icon.add), onPressed: () {})],), body: Stack(// children: <Widget>[image.asset ()'static/home.jpeg',
            fit: BoxFit.fill,
          ),
          ListView.builder(
            padding: EdgeInsets.only(left: 20, right: 20),
            itemCount: 10,
            itemBuilder: itemView,
          ),
        ],
      ),
    );
  }Copy the code

Websocket: refer to the official website

Design reference

• IOT terminal devices can not only be used as tools, but also as Internet devices
• The use of type-based ICONS is recommended. Flutter incorporates text ICONS from both platforms to cover most development needs
• Unified widgets can greatly reduce the differences between ios and Android platforms

FAQ

Here is a quick look at some commonly used design controls

– What’s the left drawer called?

That Scaffold understands that a page consists of appBar and Body.

return new Scaffold(
  drawer: Drawer(),
);Copy the code

– How to implement the ListView iOS sliding delete child control effect? (I’m done googling for you)

ShowSnackBar toastView iOS looks very good, key Android can also use ~

child: Dismissible(
    key: Key('1'),
    background: Container(
      color: Colors.red,
    ),
    onDismissed: (d) {
      Scaffold.of(context).showSnackBar(new SnackBar(
        content: new Text("Remove Success"))); },)Copy the code

– at the bottom of the tabbar

The Scaffold property, remember body: implements all controllers in the bar

bottomNavigationBarCopy the code

– Modify return button style to return invalid?

Return navigator.of (context).pop();

– round figure

Add a listener to the scrollController, or you can’t see the offset

In the writing.

Fast learning and implementation how to operate

Recommend according to the official website demo knock side, can understand this thing how to come.

There are still a lot of unrealized parts in the Demo in this paper, mainly how to realize the details. More pages are just the process of repeated Coding, and I will try to finish it later.