smart_app 0.0.2

Easy and simple way to design your application

smart_app

Easy and simple way to design your application.

Features

You will be able to access these features easily from anywhere in the application. TextStyle is hard to write again again in Text widget.

• Responsive textstyle(Especially for desktop apps)
• Dark/Light mode colors
• Internet connection checker
• Spesific settings
• Language supported words/sentences
• Icon size
• Also you can define spesific textstyle, icon size, word/sentence, color
• Customizable Features
• All specified specifications may change(specified textstyles,iconsize,colors..)
• App size, width, height

Defined TextStyle types:

• xS, S, M, L, xL, mega

Defined App Colors:

• Background Color
• Text Color
• Second Background Color
• Second Text Color

Defined Settings

• App Language
• Internet Connection Checker
• Dark Mode
• Definable function which is working after changing internet connection status

Getting started

You must add the library as a dependency to your project.

dependencies:
 smart_app: ^latest

Then run flutter packages get

Example Project

There is a detailed example project in the example folder. You can directly run and play on it. There are code snippets from example project below.

Basic Setup

Start SmartAppPanel() in main function.

late AppColors appColors;
late AppFonts appFonts;
late AppSettings appSettings;
late AppTexts appTexts;
late SmartAppPanel panel;
void main() {
  panel = SmartAppPanel();
  panel.start();
  appFonts = panel.appFonts;
  appColors = panel.appColors;
  appSettings = panel.appSettings;
  appTexts = panel.appTexts;
  runApp(MyApp());
}

Set listener for appSettings in every stateful widget. Because when you change some features, it needs setstate if you want show changes

  @override
  void initState() {
    appSettings.addListener(setStateHere);
    super.initState();
  }
  void setStateHere() {
    if (mounted) {
      setState(() {});
    }
  }
  @override
  void dispose() {
    appSettings.removeListener(setStateHere);
    super.dispose();
  }

Set application sizes in desktop/web=>

  //Turn false if you want static textstyle fonts
  bool isResposible = true;
  @override
  Widget build(BuildContext context) {
      appFonts.changeSizes(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          isResposible: isResposible);
    
  return Scaffold();
  }

in mobile=>

  bool started = false;
  bool isResposible = false;
  @override
  Widget build(BuildContext context) {
    if (!started) {
      appFonts.changeSizes(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height,
          isResposible: isResposible);
      started = true;
    }
  return Scaffold();
  }

Thats it! You can fetch your defined fonts or settings

AppFonts part

TextStyle parameters = color, isBold, fontWeight But you dont need to define its parameters if its not special

    Text(
      "Hello",
      style: appFonts.L(
      isBold: true,
      color: appColors.textColor,
      fontWeight: FontWeight.normal),
        ),

• Fetching TextStyle

    Text(
       "Hello",
       style: appFonts.L(),
    )

• If you are working on Desktop/Web app also trying to get responsive textstyle, these textstyle sizes are calculated by multiplying the app width by some ratio Ratios : { "xS": 0.007, "S": 0.009, "M": 0.012, "L": 0.015, "xL": 0.020, "mega": 0.030 } You can change these ratios with:

   appFonts.changeStaticSizeRatio(name:"L", ratio:0.012);

• If you want to work on mobile app or any app which is using static text size, static textstyle sizes like: Sizes : { "xS": 8, "S": 12, "M": 16, "L": 20, "xL": 26, "mega": 40 } You can change these sizes with:

   appFonts.changeStaticSize(name:"L", size:20);

• Fetching app sizes

    double app_width=appFonts.appWidth;
    double app_height=appFonts.appHeight;
    double app_totalSize=appFonts.totalSize;

AppColors

Application designs mostly need two common color for background fill. For example when you got left menu, second background color is waiting to fill it.

• Imagine we got left menu design and page design which is designed with expanded widgets. You can design like that:

Row(
      children: [
        Expanded(
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: appColors.secondColor,
          ),
        ),
        Expanded(
          flex: 5,
          child: Container(
            width: double.infinity,
            height: double.infinity,
            color: appColors.backGroundColor,
          ),
        )
      ],
    )

• Then we also need two text color too. These names are textColor, secondTextColor

AppSettings

AppSettings is the control mechanism of everything.

-You can set init app language, dark mode, function which is working after changing internet status while starting SmartAppPanel() or with defined functions.

   appSettings.changeLanguage="English";
   appSettings.changeDarkMode=true;
   appSettings.afterConnectionFunc = (connection) {
      print("Current Conneciton:$connection");
    };

AppTexts

When you are developing multi language application it can be hard to manage it. But with this way its so simple. You need a txt file and fill with your app texts. File should design like that: First Line:Languages Other Lines:Your text variable name|=|meaning1|,|meaning2|,|meaning3|,|meaning4 Warning: Dont put empty line or space in beginning in your text file For example:

• texts.txt file in Example/assets folder:

English,Turkish,German
hello|=|Hello|,|Merhaba|,|Hallo
lang|=|Language|,|Dil|,|Sprache
darkMode|=|Dark Mode|,|Karanlık Mod|,|Dunkler Modus
btnText|=|You have pushed the button this many times|,|Düğmeye bukadar çok bastın|,|Sie haben den Knopf so oft gedrückt
appbar_title|=|Smart App Design|,|Akıllı Uygulama Tasarımı|,|Intelligentes App-Design

• After design your app texts file you are ready to set your words. You can set texts with defined function or while starting SmartAppPanel()

   setTexts("assets/texts.txt");

• Now you are ready to fetch texts wherever you are

   Text(
        appTexts.getText("hello"),
        style: appFonts.L(),
        )

Customizable Features

• Custom AppColor

   ColorItem color=ColorItem(darkColor:Colors.black,lightColor:Colors.white);
   String name="bgColor";
   appColors.addSpecificColor(name:name,color:color);
   // Then get your specific color
   Color color=appColors.specific("bgColor");

• Custom AppFonts

   double size=20;
   String name="middle";
   appFonts.addSpecificSize(name:name,size:size);
   // Then get your specific textstyle and size
   double size=appFonts.specificSize("middle");
   TextStyle specific=appFonts.specific(specificType:"middle");

• Custom AppSettings

    bool variable = false;
    appSettings.addSpecificVariable(variable: variable, name: "leftMenuOpened");
    appSettings.addSpecificSetting(
        function: () {
          appSettings.specificVariables["leftMenuOpened"] =
              !appSettings.specificVariables["leftMenuOpened"];
        },
        name: "changeLeftMenuStatus");

Contributions

• If you found a bug, open an issue.
• If you have a feature request, open an issue.
• If you want to contribute, submit a pull request.