У меня проблема с добавлением текста в контейнер - PullRequest
Новая
       22

У меня проблема с добавлением текста в контейнер

0 голосов
/ 04 августа 2020

Я новичок в флаттере и новичок в программировании в целом. Моя проблема в том, что я не могу добавить это 

child: Align(
                alignment: Alignment(0, 48),
                  child: Text(
                'SETS',
                style: TextStyle(
                    fontWeight: FontWeight._(4),
                    fontSize: 18.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF494949)),

              )),

к этому коду 

class _SetupState extends State<Setup> {
  @override
  Widget build(BuildContext context) {
    return Column(children: [
      Align(
          alignment: Alignment.topCenter,
          child: SizedBox(
            height: 350.0,
            width: 350.0,

            child: Container(
              margin: const EdgeInsets.only(top: 6.0),
              padding: EdgeInsets.all(8),
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(15.0),
                color: Color(0xFFE3E3E3),
              ),

              child: Align(
                alignment: Alignment.topCenter,
                  child: Text(
                'SET UP YOUR WORKOUT',
                style: TextStyle(
                    fontWeight: FontWeight.bold,
                    fontSize: 20.0,
                    fontFamily: 'Roboto',
                    color: Color(0xFF494949)),
              )),
            ),
          )),
    ]);
  }
}

Я попытался добавить его в контейнер, сделать новый выравнивание, но мне все еще не удалось. Спасибо за помощь !!

Ответы [ 2 ]

1 голос
/ 05 августа 2020

Я сделал макет на основе изображения, предоставленного в комментариях: 

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: SizedBox(
          height: 350.0,
          width: 350.0,
          child: Container(
            margin: const EdgeInsets.only(top: 6.0),
            padding: EdgeInsets.all(8),
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(15.0),
              color: Color(0xFFE3E3E3),
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  'SET UP YOUR WORKOUT',
                  style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 20.0,
                      fontFamily: 'Roboto',
                      color: Color(0xFF494949)),
                ),
                Column(
                  children: <Widget>[
                    Text(
                      'SETS',
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 16.0,
                          fontFamily: 'Roboto',
                          color: Color(0xFF494949)),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(
                              Icons.add
                          ),
                          Icon(
                              Icons.remove
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text(
                      'WORKS',
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 16.0,
                          fontFamily: 'Roboto',
                          color: Color(0xFF494949)),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(
                              Icons.add
                          ),
                          Icon(
                              Icons.remove
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text(
                      'RESTS',
                      style: TextStyle(
                          fontWeight: FontWeight.w400,
                          fontSize: 16.0,
                          fontFamily: 'Roboto',
                          color: Color(0xFF494949)),
                    ),
                    Padding(
                      padding: const EdgeInsets.symmetric(horizontal: 50),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Icon(
                              Icons.add
                          ),
                          Icon(
                              Icons.remove
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
                Row(
                  children: <Widget>[
                    Expanded(
                      child: FlatButton(
                        color: Colors.greenAccent,
                        child: Text(
                            'START',
                          style: TextStyle(
                            fontSize: 40,
                            color: Colors.white,
                            fontWeight: FontWeight.w400
                          ),
                        ),
                        onPressed: () {
                        },
                        shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
                      ),
                    ),
                  ],
                )
              ],
            ),
          ),
        ),
      ),
    );
  }

Я использовал Column (назовем его column1) для всего серого поля и каждого из (SETS, +, -), (WORK, +, -) и (RESTS, +, -) - это Column внутри column1. Каждый (+, -) - это Row, обернутый Padding. Padding используется, чтобы сделать (+, -) ближе к центру поля.

Есть много способов сделать такой макет, это только один.

Результат :

res

0 голосов
/ 05 августа 2020

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

Container(
 padding:
 alignment:
 child:Text()
 )
...