Как создать макет во флаттере

Question

У меня есть интерфейс макета, и я хочу реализовать код во флаттере.
Пожалуйста, дайте мне пример реализации макета в интерфейсе флаттера, как показано на рисунке ниже. Пожалуйста, помогите мне. Спасибо.

Это мой код:

Widget build(BuildContext context) {

    return new SafeArea(
        child: new Scaffold(
      appBar: AppBar(
        title: const Text('Riwayat'),
      ),
      body: Container(
              child: ListView.builder(
                  itemCount: content.length,
                  itemBuilder: (context, i) {
                    return new ListTile(
                      title: new Column(
                        children: <Widget>[
                          SizedBox(height: 12.0),
                          new Row(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              new Expanded(
                                  child: new Column(
                                mainAxisAlignment: MainAxisAlignment.start,
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children: <Widget>[
                                  new Text(
                                    'Transaksi',
                                    style: new TextStyle(
                                        fontSize: 14.0,
                                        color: Colors.black87,
                                        fontWeight: FontWeight.bold),
                                  ),
                                  new Text('12/12/2019'
                                    style: new TextStyle(
                                        fontSize: 12.0,
                                        color: Colors.black54,
                                        fontWeight: FontWeight.normal),
                                  ),
                                ],
                              )),
                            ],
                          ),
                          new Divider(),
                        ],
                      ),
                    );
                  })),
    ));
  }

это макет

Answer 1

Вы можете построить базовый макет c во Flutter, используя виджеты: Контейнер, Строка и Столбец. Есть и другие виджеты, но это основные c.

Вы можете использовать дочернее свойство в виджете Контейнер для добавления строки или столбца. Вы можете использовать свойство children в виджетах Row и Column для добавления других виджетов. Вы продолжаете вкладывать эти виджеты, пока не получите желаемый макет.

Ссылка здесь поможет вам начать:

https://flutter.dev/docs/development/ui/layout

А вот пример кода для понимания строк и столбцов:

main.dart:

import 'package:flutter/material.dart';

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

    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          title: 'Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
          ),
          home: Home(),
        );
      }
    }

    class Home extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              title: Text('row column test'),
            ),
            body: TestRowWith3TestColumns()); //replace with TestRow or TestColumn
      }
    }

    class TestRow extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.red,
          child: Row(
            children: <Widget>[
              Container(
                color: Colors.yellow,
                child:Text('row child 1')
              ),
              Container(
                color: Colors.lightGreen,
                child:Text('row child 2'),
              ),
              Container(
                color: Colors.blue,
                child:Text('row child 3'),
              ),
            ],
          ),
        );
      }
    }

    class TestColumn extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.purple,
          child: Column(
            children: <Widget>[
              Container(
                color: Colors.yellow,
                child:Text('column child 1')
              ),
              Container(
                color: Colors.lightGreen,
                child:Text('column child 2'),
              ),
              Container(
                color: Colors.blue,
                child:Text('column child 3'),
              ),
            ],
          ),
        );
      }
    }

    class TestRowWith3TestColumns extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return Container(
          color: Colors.red,
          child: Row(
            children: <Widget>[
              TestColumn(),
              TestColumn(),
              TestColumn(),
            ],
          ),
        );
      }
    }