Hi everyone i'm trying to develop an app in flutter but can't seem to get past the first screen. Can anybody help...

Stack overflow won't allow me to post images so there you have a link for now

the link show what i'm trying to achieve

This second link show what I currently have...

This is what I currently have

My code:

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() => runApp(const pantallaPrincipal());


class pantallaPrincipal extends StatelessWidget {
  const pantallaPrincipal({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'ASA',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.

      ),
      home: const MyHomePage(title: 'Conectado'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  // This widget is the home page of your application. It is stateful, meaning
  // that it has a State object (defined below) that contains fields that affect
  // how it looks.

  // This class is the configuration for the state. It holds the values (in this
  // case the title) provided by the parent (in this case the App widget) and
  // used by the build method of the State. Fields in a Widget subclass are
  // always marked "final".

  final String title;
  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    // This method is rerun every time setState is called, for instance as done
    // by the _incrementCounter method above.
    //
    // The Flutter framework has been optimized to make rerunning build methods
    // fast, so that you can just rebuild anything that needs updating rather
    // than having to individually change instances of widgets.
    return Scaffold(
        body: Center(
          child: Container(
            color: Color.fromRGBO(51, 189, 175, 100),
            child: Container(
                color: Color.fromRGBO(98, 138, 134, 60),
                margin: new EdgeInsets.only(bottom: 100),
                child: Image.asset('IMG/Group 70.png'),
            )
          ),
        )
    );// This trailing comma makes auto-formatting nicer for build methods.
  }
}

all the help I can help would be greatly appreciated

CodePudding user response：

As Guilherme Gabanelli suggest try to look at rows and columns also check how stack widget work that can help you a lot as more and more you design this widgets get clear for you.

CodePudding user response：

You need to stretch the container wrapping your image to match the device height and width. Do this

return Scaffold(
        body: Container(
          height: double.infinity
          width: double.infinity
          child: Container(
            color: Color.fromRGBO(51, 189, 175, 100),
            child: Container(
                color: Color.fromRGBO(98, 138, 134, 60),
                margin: new EdgeInsets.only(bottom: 100),
                child: Image.asset('IMG/Group 70.png', fit: BoxFit.cover),
            )
          ),
        )
    );

This is only for using the entire screen to be covered by your image. If you're adding colours and things yourself then as others suggested, you need to look at the concepts of rows and columns.

Row can place things vertically that is 1 widget above or below another. You can place as many containers with colours or any widgets one above each other.

The column does the same thing horizontally. One widget side by side to another. You can place any number of widgets like this.

Hope this helps:)