Flutter Button — использование кнопок в проектe

Как всегда откройте новый проект в Android Studio и удалите шаблонный пример. Можете взять код из предыдущего нашего поста, например отсюда (Drawer Flutter) и вставить его в свой проект. Код необходимо брать из последнего абзаца.

В настоящей статье мы рассмотрим RaisedButton и научимся добавлять иконку на кнопку. Как использовать FlatButton мы покажем в следующей статье про Flutter Button.

Итак поехали. По ходу текста, мы не будем размещать весь код, а только изменяемые места. Вы можете поступить следующим образом. Скопировать из конца статьи код и вставлять в него примеры, указанные по ходу статьи.

RaisedButton Flutter

В переводе с английского языка raised — поднятый, возвышенный. Данный виджет представляет из себя кнопку, которая при нажатии имеет эффект приподнятости.

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton(
        onPressed: null,
        child: Text('Пример кнопки', style: TextStyle(fontSize: 15))
      )

    );
        }}

В данном примере в свойстве кнопки onpressed мы указали значение null, это состояние Disabled. Вот результат данного кода:

давайте изменим это свойство на следующее:

onPressed: (){},

результат этого действия — кнопка будет визуально активна.

Добавить цвет можно, добавив свойство:

 child: RaisedButton(
        onPressed: (){},
        child: Text('Пример кнопки',
        style: TextStyle(fontSize: 15)),
        color: Colors.yellow,
      )

Теперь давайте посмотрим как добавить иконку в RaisedButton. Для этого мы используем RaisedButton.icon, в свойстве icon которого, мы укажем нужную нам иконку, например settings. Обратите внимание, что текстовое поле, в данном виджете обозначается как label

      child: RaisedButton.icon(
        onPressed: (){},
        icon: Icon(
          Icons.settings //вид иконки. 
        ),
        label: Text('Кнопка настройки'), // название кнопки
        color: Colors.yellow, // цвет кнопки
      )

приведем некоторые виды иконок:

.computer — обозначение компьютера
.conract-phone — обозначение человека с поднятой трубкой
.content-copy — копирование выделенного фрагмента
Все варианты вы можете глянуть на официальном сайте Flutter.dev в разделе посвященном Icons class

Пойдем дальше. Изменим цвет кнопки при нажатии, добавив в свойство highlightColor

highlightColor: Colors.redAccent,

а с помощью splashColor: Colors.redAccent мы добавим эффект разрастания цвета при нажатии. Попробуйте сами.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
       appBar: AppBar(
          centerTitle: true,
          title: Text('пример Flutter Button'),
          backgroundColor: Colors.green[600],
        ),
        body: App(),

  )));
}
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: RaisedButton.icon(
        onPressed: (){},
        icon: Icon(
          Icons.settings
        ),
        label: Text('Кнопка настройки'),
        color: Colors.yellow,
        splashColor: Colors.redAccent, 
        ));}}

Круглая Flutter Button

Часто в дизайне необходимо добавить не стандартную прямоугольную кнопку, а круглую. Flutter и здесь на высоте, добавление круглой кнопки происходит с помощью виджета FloatingActionButton

child: FloatingActionButton(
        backgroundColor: Colors.orange,
        elevation: 1,
        onPressed: () => {},
      ),

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

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
       appBar: AppBar(
          centerTitle: true,
          title: Text('Flutter Button'),
          backgroundColor: Colors.green[600],
        ),
        body: App(),
       floatingActionButton: FloatingActionButton.extended(onPressed: (){}, label: Text("Кнопка внизу")),

  )));
}

если в виджете указать свойство icon: Icon(Icons.thumb_up), то результат будет следующий:

изменить цвет кнопки можно с помощью backgroundColor: Colors.green, где green — указываемый вами цвет для кнопки

Полный код статьи про RaisedButton

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
       appBar: AppBar(
          centerTitle: true,
          title: Text('Flutter Button'),
          backgroundColor: Colors.green[600],
        ),
        body: App(),
       floatingActionButton: FloatingActionButton.extended(onPressed: (){}, label: Text("Кнопка внизу"),icon: Icon(Icons.thumb_up)),
  )));
}
class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: FloatingActionButton(
        backgroundColor: Colors.orange,
        elevation: 1,
        onPressed: () => {},
      ),
      );
        }}

Напоминаем вам, что вы можете работать не только в Android Studio, но и скачав, например Sublime Text