Flutter – How to create a screen?

Screen header

class MyFlutterApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
      return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: "My app",
          home: Scaffold(
              appBar: AppBar(title: Text("Home"),),    // APP BAR
              body: HomeScreen()                       // SCREEN BODY
          )
      );
  }
}

Screen body

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Material(
          color: Colors.lightBlueAccent,     // BACKGROUND COLOR
          child: Center(
              child: new ImageAsset()        // CHILD ELEMENT
          )
      );
  }
}

Image element

class ImageAsset extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    Image image = Image(image: AssetImage('images/1208/1/1.jpg'));   // RESOURCE FILE
    return Container(child: image);
  }
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*