Flutter, text to top

Question

I've started playing with Flutter a little bit.

I created a page, that looks like this:

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:smooth_star_rating/smooth_star_rating.dart';
import 'package:intl/intl.dart';

class LandOffer extends StatefulWidget {
  final String startPoint;
  final String endPoint;

  const LandOffer({Key key, this.startPoint, this.endPoint}) : super(key: key);

  @override
  State<StatefulWidget> createState() {
    return _LandOffer(startPoint: this.startPoint, endPoint: this.endPoint);
  }
}

class _LandOffer extends State<LandOffer> {
  final String startPoint;
  final String endPoint;
  var _json;
  String _name;
  String _lastName;
  String _image;
  var isLoading = false;

  _fetchBackendData() async {
    setState(() {
      isLoading = true;
      print('Beginning loading');
    });
    final response =
        await http.get("https://randomuser.me/api/?inc=name,picture");
    if (response.statusCode == 200) {
      _json = json.decode(response.body);
      setState(() {
        isLoading = false;
        _name = toBeginningOfSentenceCase(_json['results'][0]['name']['first']);
        _lastName =
            toBeginningOfSentenceCase(_json['results'][0]['name']['last']);
        _image = _json['results'][0]['picture']['large'];
        print('Done loading...');
      });
    } else {
      throw Exception('Failed to load backend data');
    }
  }

  @override
  void initState() {
    super.initState();
    _fetchBackendData().then((result) {
      print('Feched data from backend');
    });
  }

  _LandOffer({this.startPoint, this.endPoint});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Describe your offer '),
          automaticallyImplyLeading: true,
        ),
        body: isLoading
            ? Center(
                child: CircularProgressIndicator(),
              )
            : ListView(
                children: <Widget>[
                  Column(
                    children: <Widget>[
                      Row(
                        children: <Widget>[
                          Image(
                            image: NetworkImage(_image),
                          ),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: <Widget>[
                              Text(
                                'First name: $_name',
                                textAlign: TextAlign.left,
                              ),
                              Text(
                                'Last name: $_lastName',
                                textAlign: TextAlign.left,
                              ),
                              Text('Rating'),
                              SmoothStarRating(
                                rating: 3.2,
                              ),
                            ],
                          ),
                        ],
                      ),
                    ],
                  ),
                ],
              ));
  }
}

which in additions displays the image like this:

But it seems like there is a padding added to a text.

I would like to move the text to the very top, and add a padding, should I need one.

Also, if I apply the padding to the image, it applies the padding to the whole row, which is not the desired result.

Thank you in advance for your help.

Answer 1

Because your image height are bigger one in row, if you add padding(assume both top,bottom,left,right) to image, the row height will be expanded too. Unless you only want padding(left, right) or you need constraint image height.

  Row(
    crossAxisAlignment: CrossAxisAlignment.start,    //<-- move text top
    children: <Widget>[
      Padding(
        padding: EdgeInsets.all(5),
        child: Image(
          image: NetworkImage(_image),
        ),
      ),
      Column(
        crossAxisAlignment: CrossAxisAlignment.start,   //<-- move text top
        children: <Widget>[
          Text(
            'First name: $_name',
            textAlign: TextAlign.left,
          ),
          Text(
            'Last name: $_lastName',
            textAlign: TextAlign.left,
          ),
          Text('Rating'),
          SmoothStarRating(
            rating: 3.2,
          ),
        ],
      ),
    ],
  ),