Structure of code

In this tutorial, we will tell you how about the structure of our code.

First, We should create app to contain our pages.

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

class FlutterOpenApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: FLUTTER_OPEN,
      theme: ThemeData(primaryColor: BLUE_DEEP),
      home: HomePage(),//this is our home page. 
      routes: {
        PageName.CONTAINER: (context) => ContainerPage(),//this is our choose content
        //other widgets pages will be put in here. Now I just put one as above.
      },
    );
  }
}

Then, I create a home page to show all widgets that we can choose to jump to.

class HomePage extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<HomePage> {
Widget _item(context, index) {
    return InkWell(
      child: Card(
          child: Stack(
        children: <Widget>[
          Center(
            child: Image.asset(
              PAGE_ITEMS[index]["img"],
              fit: BoxFit.cover,
            ),
          ),
          Container(
            constraints: BoxConstraints.expand(),
            decoration: BoxDecoration(gradient: _itemGradient(index)),
          ),
          Center(
            child: Text(
              PAGE_ITEMS[index]["title"],
              style: TextStyle(
                  color: TEXT_BLACK_LIGHT,
                  fontSize: TEXT_LARGE,
                  fontWeight: FontWeight.w700),
            ),
          )
        ],
      )),
      onTap: () {
        Navigator.pushNamed(context, PAGE_ITEMS[index]["click"]);
      },
    );
  }
 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(FLUTTER_OPEN),
      ),
      body: GridView.builder(
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 1,
            mainAxisSpacing: 4,
            crossAxisSpacing: 4,
            childAspectRatio: 1.2),
        itemBuilder: (context, index) {
          return _item(context, index);
        },
        itemCount: PAGE_ITEMS.length,
      ),
    );
  }
}

Facebook Page	Twitter	GitHub	​
​Flutter Open ​	​NieBin​	​NieBin​	​

Whole code in the GitHub : Flutter-Widgets