Links

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
NieBin
NieBin
Whole code in the GitHub : Flutter-Widgets