如何使代码看起来像图像？

Question

我目前正在从事一个项目，而且还很陌生。我发现很难实现这一前景。请任何帮助将不胜感激。这是应用程序的标头，这是我到目前为止所做的。谢谢。

class HeaderWiget extends StatelessWidget {
  final Color colors = Colors.amber;
return Container(
      Colors: colors, 
      padding: const EdgeInsets.only(
        top: 30,
        bottom: 10,
        left: 20,
        right: 20,
      ),
      decoration: BoxDecoration(
        color: CustomColor.uplanitBlue,
      ),
      child: Row(
        children: [`enter code here`
          Column(
            children: [
              Text('What do you do?',
                  style: GoogleFonts.workSans(
                    fontSize: 28,
                    fontWeight: FontWeight.w500,
                  )),
              Text('You can select multiple options',
                  style: GoogleFonts.workSans(
                    fontSize: 16,
                    fontWeight: FontWeight.w400,
                  ))
            ],
          ),
          FlatButton(
            onPressed: () {},
            child: Text(
              'Skip',
              style: GoogleFonts.workSans(
                color: Colors.white,
                decoration: TextDecoration.underline,
                fontSize: 16,
                fontWeight: FontWeight.w400,
              ),
            ),
          ),
        ],
      ),
    );
}

Answer 1

尝试此代码

 class HeaderWiget extends StatelessWidget {
      
        return Container(
           width: MediaQuery.of(context).size.width,
           height: 100,
           decoration: BoxDecoration(
             color: CustomColor.uplanitBlue,
             ),
           child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               crossAxisAlignment: CrossAxisAlignment.center,
               children: [
               Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                Column(
                    children: [
                    Text('What do you do?',
                       style: GoogleFonts.workSans(
                         fontSize: 28,
                         fontWeight: FontWeight.w500,
                         )),
                    Text('You can select multiple options',
                       style: GoogleFonts.workSans(
                         fontSize: 16,
                         fontWeight: FontWeight.w400,
                         ))
                    ],
                    ),
                FlatButton(
                    onPressed: () {},
                    child: Text(
                      'Skip',
                      style: GoogleFonts.workSans(
                        color: Colors.white,
                        decoration: TextDecoration.underline,
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                        ),
                      ),
                    ),
                ],
                ),
               ],
               ),
           );
    }

Answer 2

您可以使用以下代码：

class HeaderWiget extends StatelessWidget {
  final Color colors = Colors.amber;
return Container(
  padding: const EdgeInsets.only(
    top: 30,
    bottom: 10,
    left: 20,
    right: 20,
  ),
  decoration: BoxDecoration(
    color: CustomColor.uplanitBlue,
  ),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Text('What do you do?',
              style: GoogleFonts.workSans(
                fontSize: 28,
                fontWeight: FontWeight.w500,
              )),
          Text('You can select multiple options',
              style: GoogleFonts.workSans(
                fontSize: 16,
                fontWeight: FontWeight.w400,
              ))
        ],
      ),
      FlatButton(
        onPressed: () {},
        child: Text(
          'Skip',
          style: GoogleFonts.workSans(
            color: Colors.white,
            decoration: TextDecoration.underline,
            fontSize: 16,
            fontWeight: FontWeight.w400,
          ),
        ),
      ),
    ],
  ),
);
}