flutter_web_struct 0.0.2

This package simplifies the creation of web applications taking into account responsiveness and much more.

flutter_web_struct

Package for help developper to make a nice website!

Installation

Add flutter_web_struct as a dependency in your pubspec.yaml file.

dependencies:
flutter_web_struct: ^0.0.2

Usage

For use flutter_web_struct by following steps :

// Import the plugin
import 'package:flutter_web_struct/flutter_web_struct.dart';

// call initialisation in main 
void main() async {
  runApp(const MyApp());
} 

Call WebStructController and configure your Design

class MyApp extends StatelessWidget {
  MyApp({Key? key}) : super(key: key);
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
   
    var ctrl = WebStructController();
    //Configure Base Url if you need
    ctrl.webStructUrlBase = "http://www.mywebsite.com";

    // this is header
    ctrl.header = Container(
      color: Colors.red,
      height: 48,
      child: const Center(
        child: Text("This is header"),
      ),
    );
 // this is footer
    ctrl.footer = Container(
      color: Colors.white,
      height: 24,
      child: const Center(
        child: Text(
          "This is footer",
        ),
      ),
    );
    
    //you can manage your MaterialApp as you want, with your RouteManager

    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage('Flutter Demo Home Page'),
    );
  }
}

Create your page extends WebPage

class MyHomePage extends WebPage {
// Choose FULLCONTENT or SCROLLVIEW (defaut ScrollView)
  MyHomePage(title) : super(title, typePage: TypePage.FULLCONTENT);

//Complet your design for Large screen
  @override
  Widget largeContent(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: const Center(
        child: Text(
          "Large content",
        ),
      ),
    );
  }

//Complet your design for Small screen

  @override
  Widget smallContent(BuildContext context) {
    return Container(
      color: Colors.green,
      child: const Center(
        child: Text(
          "Small content",
        ),
      ),
    );
  }

//Complet your design for Medium screen
  @override
  Widget mediumContent(BuildContext context) {
    return Container(
      color: Colors.purple,
      child: const Center(
        child: Text(
          "Medium content",
        ),
      ),
    );
  }
}

Or Create your page extends MobilePage

class MyMobilePage extends MobilePage{
  MyMobilePage(String title) : super(title,typePage: TypePage.FULLCONTENT,typeMenu: TypeMenu.DRAWER);

  @override
  Widget largeContent(BuildContext context) {
    return  Container(
      color: Colors.blue,
      child: const Center(
        child: Text(
          "Large & medium content",
        ),
      ),
    );
  }

  @override
  Widget smallContent(BuildContext context) {
    return  Container(
      color: Colors.blue,
      child: const Center(
        child: Text(
          "Small content",
        ),
      ),
    );
  }
}

Configure your screen

    ctrl.webStructLargePage = 1200; //default value
    ctrl.webStructMediumPage = 800; //default value