Get started topic

There is a number of example apps that use the Fluttery Framework:

• Shrine Example App
• Bazaar Example App
• Stocks Example App
• Wonderous Example App

(Download and try them out.)

Fluttery Framework's Example App

An extensive example app accompanies the Fluttery Framework package itself. You'll find it under the 'pub-web.flutter-io.cn' folder when you take in the Fluttery Framework through your pubspec.yaml file. The code will demonstrate the functions and features that quickly makes you a multi-platform app.

The Basic Steps Necessary

1. Extend the State class with StateX instead of State.
2. Extend your State Object's Controller with the class, StateXConroller.
3. Pass your Controller to the State object's named parameter, controller.
4. Cast your Controller with the State object's property, controller.
5. Supply the 'Material' interface to the buildAndroid() function.
6. Supply the 'Cupertino' interface to the buildiOS() function.
7. If you don't have a preference, supply the interface to the build() function.

(See the little red arrows in the picture below)

---

---

---

The Counter Example App

(Copy & paste and try it out.)

import 'package:fluttery_framework/view.dart';

import 'package:fluttery_framework/controller.dart';

void main() => runApp(MyApp());

class MyApp extends AppStatefulWidget {
  MyApp({Key? key}) : super(key: key);

  @override
  AppState createAppState() => _CounterAppState();
}

class _CounterAppState extends AppState {
  _CounterAppState()
      : super(
    title: 'Flutter Demo',
    home: const MyHomePage(),
    debugShowCheckedModeBanner: false,
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
  );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, this.title = 'Flutter Demo Home Page'})
      : super(key: key);
  // Fields in a StatefulWidget should always be "final".
  final String title;
  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends StateX<MyHomePage> {
  _MyHomePageState() : super(controller: Controller()) {
    con = controller as Controller;
  }
  late Controller con;

  @override
  Widget buildAndroid(BuildContext context) => Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          const Text('You have pushed the button this many times:'),
          Text(
            '${con.counter}',
            style: Theme.of(context).textTheme.headlineMedium,
          ),
        ],
      ),
    ),
    floatingActionButton: FloatingActionButton(
      /// Try this alternative approach.
      /// The Controller merely mimics the Flutter's API
      //         onPressed: con.onPressed,
      onPressed: () => setState(con.incrementCounter),
      tooltip: 'Increment',
      child: const Icon(Icons.add),
    ),
  );
}

class Controller extends StateXController {
  factory Controller() => _this ??= Controller._();
  Controller._()
      : _model = _Model(),
        super();

  static Controller? _this;
  final _Model _model;

  /// You're free to mimic Flutter's own API
  /// The Controller is able to talk to the View (the State object)
  void onPressed() => setState(() => _model._incrementCounter());

  int get counter => _model.integer;

  /// The Controller knows how to 'talk to' the Model.
  void incrementCounter() => _model._incrementCounter();
}

class _Model {
  int get integer => _integer;
  int _integer = 0;
  int _incrementCounter() => ++_integer;
}

Define the 'Look and Feel' of your App

Right at the beginning using the App's own State class, AppState, you're able to define in detail how your app is to 'look and behave'. This State class is the amalgamation of both the MaterialApp widget and the CupertinoApp widget and an assortment of other Flutter properties. See the class, _ThisAppState, below.

(See Topic: AppState class)

import 'package:fluttery_framework/view.dart';

/// This is the widget passed to the runApp() function.
class MyApp extends AppStatefulWidget {
  ///
  MyApp({Key? key}) : super(key: key);
  @override
  AppState createAppState() => _ThisAppState();
}


/// Defines the 'look and behavior' of the app.
class _ThisAppState extends AppState {
  _ThisAppState()
      : super(
    controller: MainAppController(),
    controllers: [CounterController()],
    inTitle: () => 'Demo App'.tr,
    debugShowCheckedModeBanner: false,
    switchUI: Prefs.getBool('switchUI'),
    useRouterConfig: false,
    inSupportedLocales: () {
      /// The app's translations
      L10n.translations = {
        const Locale('zh', 'CN'): zhCN,
        const Locale('fr', 'FR'): frFR,
        const Locale('de', 'DE'): deDE,
        const Locale('he', 'IL'): heIL,
        const Locale('ru', 'RU'): ruRU,
        const Locale('es', 'AR'): esAR,
      };
      return L10n.supportedLocales;
    },
    localizationsDelegates: [
      L10n.delegate,
      GlobalWidgetsLocalizations.delegate,
      GlobalCupertinoLocalizations.delegate,
      GlobalMaterialLocalizations.delegate,
    ],
  );

}

There is a long list of parameters available to you using the AppState class.
(If you know the widgets, MaterialApp or CupertinoApp, you'll know these parameters.)

A Responsive Interface

This package utilises the Sizer package right at the start. The screenshot below is of the Fluttery Framework's build() function wrapping your app in the Sizer widget. It's a very popular means to implement a responsive interface for Flutter apps. You're able to specify a percentage and not a set number when defining the size and position of widgets on the screen.
For example, Container(width: 20.w, height: 30.h) means 20% of the screen's width and 30% of the screen's height.
Doing so allows your app's interface to readily adapt to different screen sizes.

app_state.dart
Note, this package uses at its core the StateX package: