Flutter's rookie course 5: Container

This article will use container to achieve a grid effect, which will make us more familiar with the combination of widget s. Of course, we should use GridView to achieve such effects, which will be learned in the following articles
There will be no new content in this article. We can use the content we learned earlier to combine the effect of this article. Do you have any idea about the effect map? Notice that he can roll vertically

// Copyright 2017 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
 * container
 */
import 'package:flutter/material.dart';

import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;

void main() {
//  debugPaintSizeEnabled = true;
  runApp(new MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: "container",
      home: new Scaffold(
        appBar: new AppBar(
          title: new Text("Container"),
        ),
        body: new MyContainer(),
      ),
    );
  }
}

class MyContainer extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return new MyContainerState();
  }
}

class MyContainerState extends State<MyContainer> {
  @override
  Widget build(BuildContext context) {
    //Single item
    var img = new Expanded(
      child: new Container(
        decoration: new BoxDecoration(
            border: new Border.all(color: Colors.black38, width: 10.0),
            borderRadius: const BorderRadius.all(const Radius.circular(8.0))),
        margin: const EdgeInsets.all(4.0),
        child: new Image.asset("images/lake.jpg"),
      ),
    );
//    Horizontal layout
    var row = new Row(
      children: [
        img,
        img,
      ],
    );

    return new Container(
      decoration: new BoxDecoration(
        color: Colors.black26,
      ),
      //Use ListView so we can slide content beyond the screen
      child: new ListView(
        children: [
          row,
          row,
          row,
          row,
        ],
      ),
    );
  }
}

Posted on Fri, 31 Jan 2020 19:15:50 -0800 by Fizzgig